0

我正在使用以下代码将不同的 youtube 视频加载到 Twitter Bootstrap 模式中。为什么 IE8 是唯一不加载 youtube 视频的浏览器？它只显示一个黑色的 div，视频通常会在其中显示。我正在处理的页面上有更多视频要上传，还有很多额外的脚本，所以我试图让它尽可能灵活和轻量级。任何建议，将不胜感激。谢谢！jsfiddle 在底部。

<div id="Videos">
    <a data-source="http://www.youtube.com/embed/z4Ezruu1oeQ" href="#" class="videoThumbnail">
        <img src="http://placehold.it/200x100&text=Video%20Thumbnail%20One"></a>

    <a data-source="http://www.youtube.com/embed/3tYrd4tPVXs" href="#" class="videoThumbnail">
        <img src="http://placehold.it/200x100&text=Video%20Thumbnail%20Two"></a>

</div>


<div id="videoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-body">
        <div class="video-container">
            <iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

Javascript：

$('.videoThumbnail').click(function(e) {
    e.preventDefault();
    var src = $(this).data('source');
    $('#videoModal').modal('show');
    $('#videoModal iframe').attr('src', src);
});

$('#videoModal button').click(function () {
    $('#videoModal iframe').removeAttr('src');
});

http://jsfiddle.net/curly33/LTxm7/

4

1 回答 1

1

我建议让 html 完成这项工作。

<a href="http://www.youtube.com/embed/z4Ezruu1oeQ" target="videoIframe" class="videoThumbnail">

和

<iframe name="videoIframe" width="520" height="390" frameborder="0" allowfullscreen=""></iframe>

对js的小修改：

$('.videoThumbnail').click(function(e) {
    $('#videoModal').modal('show');
});
$('#videoModal button').click(function () {
    $('#videoModal iframe').removeAttr('src');
    // ^^ is this really needed? ^^
});

http://jsfiddle.net/LTxm7/3/

于 2013-03-07T18:49:23.040 回答