Question

在Chrome / Safari中，一旦灯箱关闭，Vimeo视频将继续在后台播放。此时“分离”用于停止视频，但当您关闭灯箱并单击菜单项以重新打开视频时，视频div为空白。我尝试过“克隆”和“追加”，但无法恢复视频。

网站功能：点击“a”“b”“c”，灯光会随视频一起显示。点击灯箱中的“X”并关闭灯箱内容。

    HTML/CSS 
    a id="alphaa" <------ The  a, b, c menu item, when clicked, open the lightbox
    .abcbox_content <------- The div that holds all the content for the lightbox
    #videowrapper <------ div that holds the Vimeo iframe
    .abc-align-right <---- the "X" to close the lightbox

这是我到目前为止的jQuery。

    <script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {
    $("#videowrapper").clone(true); 
    $("#videowrapper").contents().detach();
    if ($(".abcbox_content").is(':visible'))
    $("#videowrapper").append();
    }); });
    </script>

感谢您的帮助

Answer 1

看起来你正在克隆元素，但不使用克隆。试试这个：

<script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {

        $("#videowrapper").replaceWith($("#videowrapper").clone(true)); 

    });
    </script>

Answer 2

您还可以使用Vimeo Javascript API暂停和取消暂停视频。

请参阅：http://vimeo.com/api/docs/player-js

你必须为iframe分配一个id，然后是：

$(".abc-align-right").click(function() {
  $("#iframe_id").postMessage({ "method": "pause" });
});

每当你使灯箱出现时，请致电：

 $("#iframe_id").postMessage({ "method": "play" });

由于您需要在同一页面上使用3个视频，因此您还可以使用iframe类或单独的ID。

jQuery detach div，追加div

2 个答案: