显示多个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层

回答

相关问题