Youtube Video Riproduzione automatica in popup

Question

Ho creato un popup e inserito un video di YouTube. Ho impostato il video per la riproduzione automatica. Ma il problema è la riproduzione di video quando apro la pagina. È riproduzione automatica in tutto il mondo e voglio che venga riprodotto automaticamente quando viene visualizzata la finestra popup. Non ho trovato alcuna soluzione per questo.

Attualmente, suona come se avessi il fantasma di sfondo che diceva qualcosa. Qualcuno può aiutare?

video Html

<iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&amp;autoplay=1&amp;rel=0&amp;color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div> 
    </div> 

Calling comparsa

<a href="#" data-reveal-id="video_pop"><img src="kaow.png"/></a> 
    </div> 

Popup Content

<div id="video_pop" class="reveal-modal medium"> 
    <a class="close-reveal-modal"></a> 
    <div> 

    <iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&amp;autoplay=1&amp;rel=0&amp;color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img alt="" class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div> 
    </div> 

JS

Foundation.libs.reveal = { 
    name: "reveal", 
    version: "4.2.2", 
    locked: !1, 
    settings: { 
     animation: "fadeAndPop", 
     animationSpeed: 250, 
     closeOnBackgroundClick: !0, 
     closeOnEsc: !0, 
     dismissModalClass: "close-reveal-modal", 
     bgClass: "reveal-modal-bg", 
     open: function() {}, 
     opened: function() {}, 
     close: function() {}, 
     closed: function() {}, 
     bg: a(".reveal-modal-bg"), 
     css: { 
      open: { 
       opacity: 0, 
       visibility: "visible", 
       display: "block" 
      }, 
      close: { 
       opacity: 1, 
       visibility: "hidden", 
       display: "none" 
      } 
     } 
    }, 
    init: function(b, c, d) { 
     return Foundation.inherit(this, "data_options delay"), "object" == typeof c ? a.extend(!0, this.settings, c) : "undefined" != typeof d && a.extend(!0, this.settings, d), 
     "string" != typeof c ? (this.events(), this.settings.init) : this[c].call(this, d); 
    }, 
    events: function() { 
     var b = this; 
     return a(this.scope).off(".fndtn.reveal").on("click.fndtn.reveal", "[data-reveal-id]", function(c) { 
      c.preventDefault(); 
      if (!b.locked) { 
       var d = a(this), e = d.data("reveal-ajax"); 
       b.locked = !0; 
       if ("undefined" == typeof e) b.open.call(b, d); else { 
        var f = e === !0 ? d.attr("href") : e; 
        b.open.call(b, d, { 
         url: f 
        }); 
       } 
      } 
     }).on("click.fndtn.reveal", this.close_targets(), function(c) { 
      c.preventDefault(); 
      if (!b.locked) { 
       var d = a.extend({}, b.settings, b.data_options(a(".reveal-modal.open"))); 
       if (a(c.target)[0] === a("." + d.bgClass)[0] && !d.closeOnBackgroundClick) return; 
       b.locked = !0, b.close.call(b, a(this).closest(".reveal-modal")); 
      } 
     }).on("open.fndtn.reveal", ".reveal-modal", this.settings.open).on("opened.fndtn.reveal", ".reveal-modal", this.settings.opened).on("opened.fndtn.reveal", ".reveal-modal", this.open_video).on("close.fndtn.reveal", ".reveal-modal", this.settings.close).on("closed.fndtn.reveal", ".reveal-modal", this.settings.closed).on("closed.fndtn.reveal", ".reveal-modal", this.close_video), 
     a("body").bind("keyup.reveal", function(c) { 
      var d = a(".reveal-modal.open"), e = a.extend({}, b.settings, b.data_options(d)); 
      27 === c.which && e.closeOnEsc && d.foundation("reveal", "close"); 
     }), !0; 
    }, 
    open: function(b, c) { 
     if (b) if ("undefined" != typeof b.selector) var d = a("#" + b.data("reveal-id")); else { 
      var d = a(this.scope); 
      c = b; 
     } else var d = a(this.scope); 
     if (!d.hasClass("open")) { 
      var e = a(".reveal-modal.open"); 
      "undefined" == typeof d.data("css-top") && d.data("css-top", parseInt(d.css("top"), 10)).data("offset", this.cache_offset(d)), 
      d.trigger("open"), e.length < 1 && this.toggle_bg(d); 
      if ("undefined" == typeof c || !c.url) this.hide(e, this.settings.css.close), this.show(d, this.settings.css.open); else { 
       var f = this, g = "undefined" != typeof c.success ? c.success : null; 
       a.extend(c, { 
        success: function(b, c, h) { 
         a.isFunction(g) && g(b, c, h), d.html(b), a(d).foundation("section", "reflow"), 
         f.hide(e, f.settings.css.close), f.show(d, f.settings.css.open); 
        } 
       }), a.ajax(c); 
      } 
     } 
    }, 
    close: function(b) { 
     var b = b && b.length ? b : a(this.scope), c = a(".reveal-modal.open"); 
     c.length > 0 && (this.locked = !0, b.trigger("close"), this.toggle_bg(b), this.hide(c, this.settings.css.close)); 
    }, 
    close_targets: function() { 
     var a = "." + this.settings.dismissModalClass; 
     return this.settings.closeOnBackgroundClick ? a + ", ." + this.settings.bgClass : a; 
    }, 
    toggle_bg: function(b) { 
     0 === a(".reveal-modal-bg").length && (this.settings.bg = a("<div />", { 
      "class": this.settings.bgClass 
     }).appendTo("body")), this.settings.bg.filter(":visible").length > 0 ? this.hide(this.settings.bg) : this.show(this.settings.bg); 
    }, 

Modificato:

Sto usando Foundation 5 Rivela Modello per popup: http://foundation.zurb.com/docs/components/reveal.html

Answer 1

Penso che si desidera qualcosa di simile:

LIVE EXAMPLE

Fondamentalmente ho utilizzare l'API Javascript per aggiungere azioni play e pause al video.

E uso la funzione predefinita di Foundation per aggiungere un evento al giocatore.

HTML

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a> 

    <div id="myModal" class="reveal-modal" data-reveal> 
    <h2>Awesome</h2> 
    <div id="player"></div> 
    <a class="close-reveal-modal">&#215;</a> 
    </div> 

JS

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 3. This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '315', 
     width: '560', 
     videoId: 'l-gQLqv9f4o', 
     events: { 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 


function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
     //player is playing 
    } else { 
     //player is paused 
    } 
} 

function stopVideo() { 
    player.stopVideo(); 
} 

function playVideo() { 
    player.playVideo(); 
} 

function pauseVideo() { 
    player.pauseVideo(); 
} 


$(document).on('opened.fndtn.reveal', '[data-reveal]', function() { 
    playVideo(); 
}); 

$(document).on('closed.fndtn.reveal', '[data-reveal]', function() { 
    pauseVideo(); 
}); 

Answer 2

From the YouTube JavaScript Player API Reference:

L'API JavaScript consente agli utenti di controllare la chromeless YouTube o lettori video incorporati tramite JavaScript. Le chiamate possono essere fatte per giocare, pause, cercare un certo tempo in un video, impostare il volume, disattivare il lettore e altre utili funzioni.

È possibile utilizzare il metodo player.playVideo(), player.pauseVideo() e player.stopVideo() l'API.

Answer 3

Così, Ho letto un sacco di diversi thread su questo e la maggior parte di ciò che Ive visto è piuttosto complicato. Sono andato a un percorso molto più semplice.

$('.reveal-overlay').click(function(e){ 
    var loc = document.getElementById('myFrame').src; 
    var stoploc = loc.replace("?autoplay=1", ""); 
    document.getElementById('myFrame').setAttribute('src', stoploc); 
    }); 

    $('.playVideo').click(function(e){ 
    var loc = document.getElementById('myFrame').src; 
    var autoloc = loc + "?autoplay=1"; 
    document.getElementById('myFrame').setAttribute('src', autoloc); 
    }); 

Questo sarà essenzialmente basta aggiungere? Autoplay = 1 a un video di YouTube una volta che il modal è aperto. La classe .playVideo è su qualsiasi pulsante tu stia usando per aprire la tua finestra modale.

La classe .reveal-overlay è stata creata da Foundation. Quindi, quando l'overlay viene cliccato, rimuove qualsiasi? Autoplay = 1 dall'URL del video.

Spero che questo aiuti chiunque a risolvere questo problema. È semplice e dovrebbe funzionare per più video diversi, inoltre, se qualcuno ha disattivato js, ​​non riprodurrà nulla in background.

Un'altra cosa, il video che si carica dovrebbe essere un normale video non autoplay. Questo lo trasformerà in un autoplay dopo aver cliccato su ony e restituirlo a non-autoplay quando chiuso.

Answer 4

Grazie allo script @Jarod Means! Funziona e io lo uso poiché richiede solo jQuery (soluzione semplice = Ottima soluzione). Ma l'ho sviluppato per più video clip, che è fantastico nelle presentazioni, come esempio o ogni volta che hai bisogno di questa soluzione per più di una clip nella stessa dom. L'ho fatto anche così è completamente in jQuery.

Pubblicalo semplicemente in modo da poterlo utilizzare come desideri.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Youtube-player test</title> 
    <style> 
     .youtube-player iframe { 
      display: none; 
     } 

     .youtube-player.active iframe { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
    <div class="youtube-player"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/XzXjuDM_Z54" frameborder="0" allowfullscreen></iframe> 
     <a href="#" class="youtube-link-start">Open window</a> 
     <a href="#" class="youtube-link-stop">Close window</a> 
    </div> 
    <div class="youtube-player"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/l2EYyzXJIdE" frameborder="0" allowfullscreen></iframe> 
     <a href="#" class="youtube-link-start">Open window</a> 
     <a href="#" class="youtube-link-stop">Close window</a> 
    </div> 

    <script> 

     jQuery('.youtube-player').each(function(){ 
      jQuery(this).on('click', '.youtube-link-start', function(){ 
       jQuery(this).parent().addClass('active'); 

       var loc = $(this).siblings('iframe').attr('src'); 
       var startloc = loc + "?autoplay=1"; 
       $(this).siblings('iframe').attr('src', startloc); 
      }); 

      jQuery(this).on('click', '.youtube-link-stop', function(){ 
       jQuery(this).parent().removeClass('active'); 

       var loc = $(this).siblings('iframe').attr('src'); 
       var stoploc = loc.replace("?autoplay=1", ""); 
       $(this).siblings('iframe').attr('src', stoploc); 
      }); 
     }); 
    </script> 
</body> 
</html> 

Credo che si può continuare a cambiare/sviluppo di questo con HTML, CSS e jQuery per tutto ciò che soddisfare le vostre esigenze. :)