我有一长串视频,并且有很多 iframe 会降低所有浏览器的速度。我决定只使用他们的截图。通过单击屏幕截图,将显示 iframe 并隐藏屏幕截图。我只是将 iframe 设置为默认隐藏,但我希望动态附加 iframe,以便根本不会用 HTML 代码编写 iframe,这是我的代码:
<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。我该怎么做?
最佳答案
$('.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();
});
关于javascript - 通过单击它的 youtube 屏幕截图附加 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14959291/