弹出模式jquery在尝试播放其他视频时播放现有的嵌入youtube视频

Question

我试图让一个嵌入式视频播放，但当我这样做时，它们都在同一时间播放。我花了两天的时间试图解决这个问题，但无济于事。谁能帮帮忙，我的编码经验有限。

代码如下：

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

Answer 1

解决了，它不漂亮，但工作。希望这对某些人有帮助。我把autoplay 1放在一个单独的点击功能上，如下所示。注意:我还没有修改video2，但你可以在#视频上看到修复。

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

Answer 2

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

本质上，我们想要实现的是在具有popup类和给定[data-popup]属性的div的子级上设置src，因此我们需要定位该子标记。此问题的一个解决方案是使用jQuery find方法，该方法将使用给定的选择器定位子项。在我们的例子中，这将是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();
    });
});