Css Wordpress-更改主页上的视频（iframe）尺寸

在网站上工作并且视频输出有问题

//该网站是：

在帖子中，我嵌入了一个宽度为560像素的Youtube视频。它在邮局看起来很棒。但当该图像被拉到主页上显示时，它超出了允许的尺寸。我只希望它是一个316像素的最大值

我尝试在css中添加一个width属性，一个类添加到我的iframe中，但无法使其工作。如果我设置了一个iframe类，只允许宽度为316px，那么文章中的视频也会减少

---

任何帮助都会很好

如果主页上的这些图像来自“设置特色图像”方法，您可以抓取视频屏幕，调整大小并将其用作“特色图像”。

我在JSFIDLE中有一个jQuery代码，它将iframe扩展到内容的最大大小

在帖子中添加以下HTML代码：

<article>
<p><iframe width="400" height="400" src="http://www.youtube.com/...."></iframe></p>
</article>

在模板中添加以下jQuery代码

<script type='text/javascript'>
jQuery(document).ready(function($) {
$(function() {

var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("p");

$allVideos.each(function() {

  $(this)
    // jQuery .data does not work on object/embed elements
    .attr('data-aspectRatio', this.height / this.width)
    .removeAttr('height')
    .removeAttr('width');
});

$(window).resize(function() {

  var newWidth = $fluidEl.width();
  $allVideos.each(function() {

    var $el = $(this);
    $el
        .width(newWidth)
        .height(newWidth * $el.attr('data-aspectRatio'));

  });

}).resize();

});
});
</script>

jQuery（文档）.ready（函数（$）{
$（函数（）{
var$allVideos=$（“iframe[src^=”http://player.vimeo.com“]，iframe[src^=”http://www.youtube.com“]，对象，嵌入”），
$fluidEl=$（“p”）；
$allVideos.each（函数（）{
$（本）
//数据在对象/嵌入元素上不起作用
.attr（'data-aspectRatio'，this.height/this.width）
.removeAttr（“高度”）
.removeAttr（“宽度”）；
});
$（窗口）。调整大小（函数（）{
var newWidth=$fluidEl.width（）；
$allVideos.each（函数（）{
var$el=$（本）；
$el
.宽度（新宽度）
.高度（新宽度*$el.attr（'data-aspectRatio'）；
});
}).resize（）；
});
});

---

我在我的Wordpress网站上试用了这段代码，效果很好。

在Chrome上非常有效。对Safari和Firefox的浏览器兼容性有什么建议吗？我不是javascript方面的专家，但看看Chrome开发者工具，你会发现很多javascript错误。试着先去掉那些。检查这个