2012-03-03 169 views
0

在Chrome/Safari中,Vimeo視頻會在燈箱關閉後繼續在後臺播放。此時,「detach」會停止播放視頻,但當您關閉Lightbox並單擊某個菜單項以重新打開視頻時,視頻div將爲空白。我試過「克隆」和「追加」,無法將視頻恢復。jQuery detach div,追加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> 

感謝所有幫助

回答

0

它看起來像你複製的元素,但不能使用克隆。試試這個:

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

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

    }); 
    </script> 
+0

感謝您的回覆。這顯示了視頻,但將視頻放在文本塊的底部。也許引用錯誤的div? – Andrea 2012-03-03 02:01:46

+0

也許吧。你可以嘗試像'$(「#videowrapper」)。replaceWith($(「#videowrapper」)。clone(true));' – Malk 2012-03-03 02:05:50

+0

我真的不知道是否需要所有其他的東西。換掉這些元素並稱之爲好。我編輯了我的答案。 – Malk 2012-03-03 02:14:46

0

您也可以使用Vimeo Javascript API來暫停和取消暫停視頻。

參見:http://vimeo.com/api/docs/player-js

你不得不一個id分配到的iframe,然後是這樣的:

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

,只要你做的燈箱出現呼叫:

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

由於您需要此功能才能在同一頁面上處理3個視頻,因此您還可以使用iframe或單獨的id的類。

+0

是的,我看到了,但他們失去了我後添加「api = 1」的網址 – Andrea 2012-03-03 02:33:19

+0

感謝張貼。我會給它一個鏡頭。 – Andrea 2012-03-03 02:35:19