使用显示/隐藏 DIV 层显示多个 Youtube 视频

【问题标题】：Displaying Multiple Youtube Videos with Show/Hide DIV Layers使用显示/隐藏 DIV 层显示多个 Youtube 视频
【发布时间】：2013-06-13 09:10:24
【问题描述】：

我在这个例子中有一个问题： http://modstudio.eu/facebook/hq/vid.php#

如何处理多组视频在点击相应缩略图时显示？并停止播放所有其他视频？

它适用于处理多个视频的网站https://modstudio.eu/facebook/hq/live2.php。这可能有助于解释我想要完成的工作。

我认为这与<div class="vidContainer" id="vidContainer">有关

我尝试将 section='A', section='B' 等添加到 DIV vidContainers，以便脚本知道哪个对应于哪个，但我不太确定如何更改 javascript 以对应将视频更改为仅那个特定的容器。

有什么想法吗？

【问题讨论】：

标签： jquery html youtube layer

【解决方案1】：

这可能是您需要的：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>

【讨论】：