1

我有一长串视频，并且有很多 iframe 会减慢所有浏览器的速度。我决定只使用他们的截图。通过单击屏幕截图，将显示 iframe，并隐藏屏幕截图。我只是将 iframe 默认设置为隐藏，但我希望动态附加 iframe，以便 iframe 根本不会用 HTML 代码编写，这是我的代码：

<div class="youtube">
                <div class="description">Desciption 1</div>
                <div class="youtube_thumb">
                    <img src="http://img.youtube.com/vi/mqf6K6qYOWg/0.jpg" style="width:325px;border:0;" />
                    <iframe width="325" height="250" src="http://www.youtube.com/embed/mqf6K6qYOWg" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="youtube">
                <div class="description">Desciption 2</div>
                <div class="youtube_thumb">
                    <img src="http://img.youtube.com/vi/GIc14HyiLNs/0.jpg" style="width:325px;border:0;" />
                    <iframe width="325" height="250" src="http://www.youtube.com/embed/GIc14HyiLNs" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

等等..

和 javascript：

$('.youtube_thumb > img').click(function(){
            var $img = $(this);
            $img.hide();
            $img.next().show();
        });

和风格：

.youtube_thumb iframe { display:none; }
.youtube_thumb:hover { cursor:pointer; }

如您所见并且可能知道，我获得的屏幕截图直接来自 youtube，因此屏幕截图链接：mqf6K6qYOWg/0.jpg和框架链接：/embed/mqf6K6qYOWg相同，我认为可以通过使用屏幕截图的链接，将 iframe 附加到相同的链接。我怎么能这样做？

4

2 回答 2

2 
$('.youtube_thumb > img').click(function(){
    var parts = this.src.split("/");  //grab the url and split it into parts
    var id = parts[parts.length-2]; //grab the second to last piece
    $('<iframe width="325" height="250" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>').insertAfter(this);  //append the iframe
    $(this).hide();  // .remove();
});
于 2013-02-19T14:09:11.860 回答
1

将 img 包装成 a 标签

<a class="wrap" href="http://www.youtube.com/embed/mqf6K6qYOWg"><img /></a>

jQuery

$('.wrap').on('click', function() {
    var src = $(this).attr('href');
    $(this).before('<iframe width="325" height="250" src="'+src+'" frameborder="0" allowfullscreen></iframe>');
    $(this).remove();
    return false;
)}
于 2013-02-19T14:03:01.010 回答