jquery 替换 YouTube iFrame答案

【问题标题】：jquery replace YouTube iFramejquery 替换 YouTube iFrame
【发布时间】：2025-12-13 12:15:01
【问题描述】：

如果 YouTube iframe 嵌入代码是...

<iframe width="560" height="315" src="http://www.youtube.com/embed/dd8W4PNUU3Q?rel=0" frameborder="0" allowfullscreen></iframe>

如何提取dd8W4PNUU3Q 即视频ID

并将整个 iframe 替换为

<img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/>

并用<a> 包装图像...

<a href="http://www.MYURL.com/?v=dd8W4PNUU3Q"><img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/></a>

【问题讨论】：

你到底想做什么？这应该在带有某种脚本的 youtube 网站上工作吗？书签？还是在您的网站中嵌入 youtube？
我很想了解最终目标。如果您正在执行此客户端，则播放器已被调用并正在显示播放器图像。您只是不想嵌入播放器？这是一种相当依赖数据和代码的方法；但同样，我不一定了解大局，我可能是错的。
您需要完整的 js 解决方案还是对解决方案进行伪编码就足够了？我不确定我是否有时间写完整篇文章

标签： javascript jquery iframe youtube

【解决方案1】：

var RE = /embed\/([a-zA-Z0-9_-]{11})/;

jQuery( "iframe" ).each(function(){

var id = ( this.src.match( RE ) || [] )[1];

    if( id ) {
    jQuery( this ).replaceWith( '<a href="http://www.MYURL.com/?v='+id+'">'+
                                '<img src="http://i1.ytimg.com/vi/'+id+'/hqdefault.jpg"'+
                                ' class="someClass" /></a>' );
    }

});

Jsfiddle：http://jsfiddle.net/4E3DH/1/

【讨论】：