Youtube视频在弹出窗口中自动播放 [英] Youtube Video Autoplay in popup
本文介绍了Youtube视频在弹出窗口中自动播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个弹出窗口，并在其中放置了一个YouTube视频。我将视频设置为自动播放。但问题是视频播放时，我打开页面。它是在全球自动播放，我希望它弹出时显示自动播放。我没有找到任何解决方案。
目前，它像我一样有背景鬼说些什么。
任何人都可以帮助？
视频Html
< iframe width =800height =315src =http://www.youtube.com/embed/?wmode=opaque&autoplay = 1& amp; rel = 0& amp; color = whiteframeborder =0>< / iframe>< a href =http://www.youtube.comtarget =_ blank> < img alt =class =watermarksrc =https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA/>< / a>< / div>
< / div>
调用弹出窗口
code>< a href =＃data-reveal-id =video_pop>< img src =kaow.png/>< / a>
< / div>
弹出内容
< div id =video_popclass =reveal-modal medium>
< a class =close-reveal-modal>< / a>
< div>
< iframe width =800height =315src =http://www.youtube.com/embed/?wmode=opaque&autoplay=1&amp = 0& amp; color = whiteframeborder =0>< / iframe>< a href =http://www.youtube.comtarget =_ blank>< img alt = class =watermarksrc =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 b $ b bgClass：reveal-modal-bg，
open：function（）{}，
open：function（）{}，
close：function b $ b closed：function（）{}，
bg：a（。reveal-modal-bg），
css：{
open：{
opacity：0 ，
visibility：visible，
display：block
}，
close：{
opacity：1，
visibility： ，
display：none
}
}
}，
init：function（b，c，d）{
return Foundation.inherit这个，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（＃ 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 ）， 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：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）;
}，
已编辑：
$ b
我使用 Foundation 5 Reveal Model 弹出窗口： http://foundation.zurb.com/docs/components/reveal.html
解决方案
我想你想要类似：
基本上我使用API Javascript来添加操作 play 暂停到视频。
我使用Foundation的默认功能添加到播放器的事件。 / p>
HTML
< a href =＃data-reveal-id =myModal>点击我模拟< / a>
< div id =myModalclass =reveal-modaldata-reveal>
< h2>真棒< / 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.此函数创建一个< iframe> （和YouTube播放器）
// API代码下载后。
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）{
//播放器正在播放
} else {
// player is paused
}
}
function stopVideo（）{
player.stopVideo
}
function playVideo（）{
player.playVideo（）;
}
function pauseVideo（）{
player.pauseVideo（）;
}
$（document）.on（'opens.fndtn.reveal'，'[data-reveal]'，function（）{
playVideo ）;
}）;
$（document）.on（'closed.fndtn.reveal'，'[data-reveal]'，function（）{
pauseVideo（）;
}）;
I've made a popup and placed a youtube video in it. I set video to autoplay. But the problem is video plays when i open the page. It is auto play in global and i want it to autoplay when popup shows. I did not find any solution for it.
Currently, It playing like i have background ghost saying something. Can anyone help?
Video Html
<iframe width="800" height="315" src="http://www.youtube.com/embed/?wmode=opaque&autoplay=1&rel=0&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 popup
<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&autoplay=1&rel=0&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);
},
EDITED:
I am using Foundation 5 Reveal Model for popup: http://foundation.zurb.com/docs/components/reveal.html
解决方案
I think you want something like that :
Basically i use the API Javascript to add actions play and pause to the video.
And i use default function of Foundation to add an event when to the player.
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">×</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();
});
这篇关于Youtube视频在弹出窗口中自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
