<div class="lightbox-trigger"></div>
<div class="lightbox-content autoplay"><iframe>...</iframe></div>
<div class="mfp-wrap"></div>
我.lightbox-trigger
,单击时会在.mfp-wrap
内部打开.lightbox-content
.默认情况下,.lightbox-content
是隐藏的,只有在它进入.mfp-wrap
当.lightbox-content.autoplay
里面有YouTube视频时,我希望视频在.mfp-wrap
出现后自动播放。
我希望这是有道理的。我试过这个jQuery,但它对我不起作用...
$(".lightbox-trigger").click(function() {
$(".mfp-wrap .lightbox-content.autoplay iframe").attr("src").replace("?", "?autoplay=1&");
});
Youtube 视频嵌入链接 - 添加属性
allow="autoplay; encrypted-media";
示例 iFrame 链接:
<iframe width="560" height="315" src="https://www.youtube.com/embed/iVe__Py2GuU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
例:
$(".lightbox-trigger").click(function() {
$(".mfp-wrap .lightbox-content.autoplay iframe").attr("src").replace("?", "?allow=autoplay; encrypted-media&");
});
我能够使用以下方法使其工作:
// add parameter when opening video in popup
$(".lightbox-trigger").on("click", function() {
$(".mfp-wrap .et_pb_video.autoplay iframe").each(function(){
var addautoplay = $(this).attr("src")+"&autoplay=1";
$(this).attr("src",addautoplay);
});
});
//for removing the parameter when closing the video
$('.lightbox-overlay').click(function() {
$(".et_pb_video.autoplay iframe").each(function(){
var removeautoplay = $(this).attr("src").replace("&autoplay=1", "");
$(this).attr("src",removeautoplay);
});
$.magnificPopup.close();
});