WordPress的 - 在主页上更改视频（iframe）的尺寸

在网站上工作，并与视频输出有问题。WordPress的 - 在主页上更改视频（iframe）的尺寸

//该网站是：http://tastethemovement.org

在帖子中，我嵌入YouTube视频与560像素的宽度。这篇文章看起来很棒。但是当该图像被拉到主页上显示时，它会超出允许的尺寸。我只希望它是最大的316像素。

我试着在我的CSS中添加一个宽度属性，一个类给我的iframe，但无法让它工作。如果我设置了一个iframe类并且只允许宽度为316px，那么帖子中的视频也会减少。

任何帮助将是伟大的！

来源

2013-03-24 user2132752

我在jsFiddle中有这个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>

我试了我的Wordpress网站上的代码，它的工作。

来源

2013-03-24 14:11:30 user850010

在Chrome中很有效。有关Safari和Firefox浏览器兼容性的任何建议？ – user2132752 2013-03-26 00:09:48

我不是javascript专家，但看着Chrome开发人员工具，你有很多Javascript错误。先尝试摆脱那些。检查这个http://stackoverflow.com/questions/7181573/does-javascript-execution-stop-when-an-invalid-line-is-encountered – user850010 2013-03-26 07:27:51

如果主页上的图像来自“设置精选图像”方法，您可以对视频进行屏幕截图，调整大小并将其用作“精选图像”。

来源

2013-03-24 14:05:32

WordPress的 - 在主页上更改视频（iframe）的尺寸

回答

相关问题