弹出模式jquery播放现有的嵌入youtube视频时，试图播放另一个

popup modal jquery playing existing embeded youtube video when trying to play another one

本文关键字：播放 视频 youtube 另一个 模式 jquery      更新时间：2023-11-20

我试图让一个嵌入式视频播放，但当我这样做时，它们都会同时播放。我花了两天时间试图解决这个问题，但没有成功。有人能帮忙吗？我的编码经验有限。

这是代码：

HTML:

<div class="play"><a data-popup-open="popup-1" href="#"></a></div>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
    <iframe id="video" width="854" height="480"  frameborder="0" allowfullscreen></iframe>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>

<div class="play"><a data-popup-open="popup-2" href="#"></a></div>
<div class="popup" data-popup="popup-2">
<div class="popup-inner">
    <iframe id="video2" width="854" height="480"  frameborder="0" allowfullscreen></iframe>
    <a class="popup-close" data-popup-close="popup-2" href="#">x</a>
</div>

CSS：

.popup {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.75);
z-index: 999;
}

.popup-inner {
max-width: 854px;
width: 90%;
padding: 0px;
position: fixed;
top: 53%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: auto;
min-width: 854px;
}
iframe {
border: 1px solid #151515);
border-radius: 7px !important;
z-index: 12;
}

.popup-close {
position: absolute;
width: 28px;
height: 28px;
padding-top: 4px;
padding-right: 2px;
padding-left: 2px;
display: inline-block;
position: absolute;
top: 0px;
right: -8px;
transition: ease 0.25s all;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
border-radius: 1000px;
background: rgba(0,0,0,0.8);
font-family: Arial, Sans-Serif;
font-size: 20px;
text-align: center;
line-height: 100%;
color: #fff;
z-index:13;
}

JAVASCRIPT

$(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

$("#video").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
$("#video")[0].src += "?autoplay=1&modestbranding=1";

$("#video2").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
$("#video2")[0].src += "?autoplay=1&modestbranding=1";
    e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
$("#video, #video2").attr('src','');
    e.preventDefault();
});
});

解决了，它不漂亮，但有效。希望这能帮助到别人。我把autoplay1放在一个单独的点击函数上，如下所示。n.b我还没有更改video2，但你会在#video上看到修复。

 $(function() {
//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
//-----1st start    
$("#video").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
$(".play").click(function() {
$("#video")[0].src += "?autoplay=1&modestbranding=1"; 
});
//-----1st end
$("#video2").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
$("#video2")[0].src += "?modestbranding=1";
    e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
//-----1st start    
$("#video, #video2").attr('src','');
//-----1st end
    e.preventDefault();
});
});

我无法重现您所描述的内容，但会尽我所能提供一些帮助。正如你在回答中所说，假设自动播放是视频播放的原因，那么自动播放似乎就是问题所在。无论点击哪个弹出窗口，两个视频标签的src都会设置为autoplay属性，这将始终使两个视频都能播放。

从本质上讲，我们想要实现的是在div的子级上设置src，该div有一个弹出类和一个给定的[data-popup]属性，因此我们需要定位该子标记。这个问题的一个解决方案是使用jQueryfind方法，该方法将使用给定的选择器定位子级。在我们的例子中，这将是iframe标签。

$(function() {
    //----- OPEN
    $('[data-popup-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        targeted_popup_class.find('iframe').attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
        targeted_popup_class.find('iframe').src += "?autoplay=1&modestbranding=1";
        e.preventDefault();
    });
    //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        targeted_popup_class.find('iframe').attr('src','');
            e.preventDefault();
    });
});
相关文章：