我正在尝试创建弹出与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>
在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'));
}
工作演示
