Question

我有以下代码查看特定的CSS类src，并从中获取存储在$(document).ready(function () { $(".vma_overlay").click(function (event) { var $videoSrcOriginal = $(event.target).siblings('.vma_iFramePopup').attr("src"); // Check if the embedded youtube url has any attributes appended // by looking for a '?' in the url. // If one is found, append our autoplay attribute using '&', // else append it with '?'. if ($videoSrcOriginal.indexOf('?') > -1) { var $videoSrc = $videoSrcOriginal // when the modal is opened autoplay it $('#vma_ModalBox').on('shown.bs.modal', function (e) { // set the video src to autoplay var $videoSrcAuto = $videoSrc + "&autoplay=1&mute=1"; $("#vma_video").attr('src', $videoSrcAuto); $('body').addClass("modalyt"); }) } else { var $videoSrc = $(".vma_iFramePopup").attr("src"); // when the modal is opened autoplay it $('#vma_ModalBox').on('shown.bs.modal', function (e) { // set the video src to autoplay var $videoSrcAuto = $videoSrc + "?autoplay=1&mute=1"; $("#vma_video").attr('src', $videoSrcAuto); $('body').addClass("modalyt"); }) } // stop playing the youtube video when modal is closed $('#vma_ModalBox').on('hide.bs.modal', function (e) { $("#vma_video").attr('src', $videoSrc); $('body').removeClass("modalyt"); }) }); });中的链接。然后将其加载到模式弹出窗口中。

<iframe class="embed-responsive-item" width="80%" height="80%" src(unknown) id="vma_video" allowfullscreen="" data-gtm-yt-inspected-9256558_25="true">></iframe>

我被告知视频不在模态中播放。加载时的模态为空。

检查浏览器控制台时，没有看到任何相关错误。

当我检查模式弹出窗口中的iframe时，我看到它显示为

src（未知）

在src元素中：

{{1}}

我无法确定为什么会这样？

Answer 1

我尝试在实时网站上摆弄些稍微改动您的代码，然后似乎可以正常工作：

$('.vma_overlay').on('click', function() {

    var $videoSrcOriginal = $(this).siblings('.vma_iFramePopup').attr("src");

    if ($videoSrcOriginal.indexOf('?') > -1) {
        $('#vma_ModalBox').show();
        var $videoSrcAuto = $videoSrcOriginal + "&autoplay=1&mute=1";
        $('#vma_ModalBox #vma_video').attr('src', $videoSrcAuto);
        $('body').addClass("modalyt");
    }
});

Answer 2

事实证明，在这种情况下，解决方案是替换：

$(document).ready(function () {

具有：

window.onload = function () {

由于某些特定于我们的设置的原因，无法触发准备文档的jquery方法。

JavaScript：嵌入式YouTube视频无法在模式弹出窗口中播放

2 个答案: