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放在单独的单击功能上，如下所示。 n.b我还没有改变视频2，但你会在#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();
});
});

Answer 2

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

基本上我们想要实现的是在具有弹出类和给定[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();
    });
});

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

2 个答案: