如果是 YouTube 嵌入，则定位 iframe

Question

我想将页面上的所有 YouTube 嵌入内容打包到一个 div 中。目前，我可以将 all iframe 包装在 div 中：

   jQuery(document).ready(function(){

    jQuery('iframe').wrap("<div class='ta-vid-cont'></div>");

   });

但我只想定位 YouTube 嵌入的 iframe。我该怎么做？

典型的 YouTube 嵌入看起来像：

<iframe width="700" height="394" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/d3LDQMKLc?feature=oembed&wmode=transparent">

Answer 1

您可以将 filter() 与通过源 url:

的正则表达式过滤结合使用

jQuery('iframe').filter(function(){
    return this.src.match(/youtube\.com/i);
}).wrap("<div class='ta-vid-cont'></div>");

fiddle: http://jsfiddle.net/0hhk9kc5/1/

（由于 jsfiddle 出于安全原因不会显示 iframe，我将过滤更改为另一个属性...但想法是一样的；））

[编辑]: 用于覆盖 youtu.be:

jQuery('iframe').filter(function(){
    return this.src.match(/(youtube\.com|youtu\.be)/i);
}).wrap("<div class='ta-vid-cont'></div>");

所用正则表达式的说明：https://regex101.com/r/dU0bF2/1

Answer 2

我想你可以在 iframe 的 src 属性中搜索 "www.youtube.com"

var str=$('iframe').attr('src');  
if(str.search('www.youtube.com') > 0){  
......
....  
};

此致

Answer 3

可以使用Attrubute Contains选择器

$('iframe[src*="youtube"]').wrap("<div class='ta-vid-cont'></div>");

引用Attribute Contains Selector docs

Answer 4

您可以轻松地为每个 iframe 分配一个 ID 并使用 jQuery<iframe id="youtube" width="700" height="394" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/d3LDQMKLc?feature=oembed&wmode=transparent">

获取它

$(document).ready(function(){

    $('#youtube').wrap("<div class='ta-vid-cont'></div>");
});

如果是 YouTube 嵌入，则定位 iframe

Target iframe if it is a YouTube embed

javascript

youtube

iframe

jquery