使用Vimeo视频自动播放打开/关闭弹出窗口-Javascript

Question

我正在尝试创建弹出与Vimeo视频在里面。我的页面上有divideid=“showvideo”。单击要打开弹出窗口的div（带有id=“Opened-Video”的新div）。id=“open-video”的Div有如下所示的Viemo视频的iframe

<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

使用src URL中的？autoplay=1参数将此iframe设置为自动播放。

这是我的JavaScript

jQuery(document).ready(function(){

    jQuery('#showVideo').click(function() {
    jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
    }); 
});

这就管用了。

您将注意到html（）函数中的image标记，这是用于关闭id=“opened-video”的image，我使用Javascript函数完成了这一操作

function closeDiv() {
        document.getElementById('opened-video').style.display = "none";

    }

这也可以，但有一个问题，打开的视频设置为display=“none”，但Vimeo视频仍在后台播放，我听到声音。当我按下id=“Close-Video”图像时，如何停止视频工作？我如何删除src参数？当我点击图像时autoplay=1？或者其他什么建议？

这是HTML

<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo"  />

<div class="video-front" id="opened-video">     
    </div>

Answer 1

在closediv()函数中,在使显示无之后插入这两行,

$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));

这样看起来就像，

function closeDiv() {
    document.getElementById('opened-video').style.display = "none";
    // Removes the src
    $('iframe').attr('src', "");    
    // Reloads the src so that it can be played again
    $('iframe').attr('src', $('iframe').attr('src'));     
}

工作演示