0

次のコードを使用して、さまざまなYouTubeビデオをTwitterBootstrapモーダルにロードしています。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 に答える