顯示多個YouTube視頻與顯示/隱藏DIV層

我在這個例子中的一個問題： http://modstudio.eu/facebook/hq/vid.php#顯示多個YouTube視頻與顯示/隱藏DIV層

如何點擊其相應的縮略圖，當我處理的視頻多組顯示？並停止正在播放的所有其他視頻？

這是一個網站https://modstudio.eu/facebook/hq/live2.php它handes多個視頻。這可能有助於解釋我想要完成的事情。

我認爲這件事情做的<div class="vidContainer" id="vidContainer">

我嘗試添加部分=「A」，節=「B」等的DIV vidContainers所以對應的腳本knonws去，但是我不太其中確定如何更改JavaScript以對應於僅將視頻更改爲特定容器。

有什麼想法？

來源

2013-06-13 HQ Aarhus

可能這是你需要的：http://jsfiddle.net/FCa7k/10/。這是HTML，CSS & JS

img{ 
    cursor : pointer; 
    } 
    ul li{ 
    float : left; 
    list-style: none; 
    } 

    <ul id="container"> 
    <li><img src="http://i2.ytimg.com/vi/mIMFL9wRaJE/default.jpg" data-id="mIMFL9wRaJE" class=""></li> 
    <li><img src="http://i1.ytimg.com/vi/HRtX_GhLNrU/default.jpg" data-id="HRtX_GhLNrU"></li> 
    <li><img src="http://i2.ytimg.com/vi/YH72FLaJe5Y/default.jpg" data-id="YH72FLaJe5Y"></li> 
    </ul> 
    <div id="video"></div> 
    <script> 
    $(function(){ 
    $("li img").live('click', function(){ 
    //alert($(this).data('id')); 
    var id = $(this).data('id'); 
    //alert(id); 
    var str = '<iframe width="200" height="200" src="http://www.youtube.com/embed/'+id+'?wmode=Opaque" frameborder="0" allowfullscreen></iframe>'; 
    //alert(str); 
    $("#video").html(str); 
    }); 
    }); 
    </script>

來源

2013-06-13 11:28:16

顯示多個YouTube視頻與顯示/隱藏DIV層

回答

相關問題