Question

我正在尝试使用Vimeo视频创建弹出窗口。我的页面上有div = id =“showVideo”。点击该div我想打开弹出窗口（id为“open-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（）函数中的图像标记，该图像用于关闭id =“open-video”，我使用Javascript函数执行此操作

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

    }

这也有效，但有一个问题，open-video设置为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

在sbrk()功能中，在显示无，

后插入这两行

closeDiv()

所以它看起来像，

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

Working DEMO

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

1 个答案: