改变iframe youtube src与IE8错误

Change iframe youtube src with IE8 Error

本文关键字：IE8 错误 src iframe youtube 改变      更新时间：2023-09-26

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

<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/

我建议让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/

相关文章：