当视频出现在某个容器中时自动播放 youtube 视频答案

【问题标题】：Autoplay youtube video when video appears in a certain container当视频出现在某个容器中时自动播放 youtube 视频
【发布时间】：2018-10-03 01:23:31
【问题描述】：

<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&"); 
});

【问题讨论】：

你只会得到 attr src 并用自动播放替换字符串。您需要将其分配回 src。
var iframe = $(".mfp-wrap .lightbox-content.autoplay iframe"); iframe[0].src = attr("src").replace("?", "?autoplay=1&"); 这样的东西可能会起作用
谢谢@sertsedat，我以为我错过了什么。不幸的是，它仍然不适合我......

标签： jquery youtube-javascript-api magnific-popup

【解决方案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&"); 
});

【讨论】：

allow="autoplay; encrypted-media" 在那里，但是 jQuery 没有做任何事情......

【解决方案2】：

我能够使用以下方法来完成这项工作：

// 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();
});

【讨论】：