Javascript 通过单击iframe的youtube屏幕截图附加iframe

我有一个很长的视频列表，有很多iFrame会减慢所有浏览器的速度。我决定只使用他们的截图。通过单击屏幕截图，iframe将显示，screeshot将隐藏。我只是将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>

风格：

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

---

正如你所看到的，也可能知道的，我得到的截图是直接从youtube获得的，因此截图链接：

mqf6K6qYOWg/0.jpg

和帧内链接：

/embed/mqf6K6qYOWg

是相同的，我认为可以使用截图的链接，用相同的链接附加iframe。我怎么能做到

将img包装成带有

jquery

$（'.wrap'）。在（'click'，function（）上{
var src=$（this.attr（'href'）；
$（本）。在（''）之前；
$（this.remove（）；
返回false；
)}

$（'.youtube\u thumb>img'）。单击（函数（）{
var parts=this.src.split（“/”）//获取url并将其拆分为多个部分
var id=parts[parts.length-2]；//抓住倒数第二块
$（“”）.insertAfter（this）；//附加iframe
$（this.hide（）；//.remove（）；
});

$（“”）之后插入（此）@epascarello我没有回答）我想被加上框架，而不是希德诺我误解了。哎呀。对不起，谢谢！但是我有一个很长的视频和链接列表，所以要更改和包装所有链接有点困难。。。你能在不包装链接的情况下更改它吗？很好的方法，但是
“http://img.youtube.com/vi/mqf6K6qYOWg/0.jpg.replace（'/0.jpg'，''）
！=<代码>http://www.youtube.com/embed/mqf6K6qYOWg

是此方法不起作用。。。顺便说一句，我删除了其中的所有框架，因为我知道我必须将其插入：

$（'.youtube\u thumb>img'）。单击（function（）{HERE}）？抱歉）忘记删除样式）my Bad您还可以将绑定更改为$（'.youtube_thumb>img'）。one（'click'，function（）{在单击后丢弃绑定
.youtube_thumb iframe { display:none; }
.youtube_thumb:hover { cursor:pointer; }

$('.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;
)}

$('.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();
});