在网站上工作并遇到视频输出问题。
// 网站是：http://tastethemovement.org
在帖子中，我嵌入了一个宽度为 560 像素的 Youtube 视频。在帖子中看起来很棒。但是当该图像被拉到主页上显示时，它超出了允许的尺寸。我只希望它最大为 316 像素。
我尝试在我的 iframe 中的 css 中添加一个 width 属性，但无法让它工作。如果我设置一个 iframe 类并且只允许 316px 的宽度，那么帖子中的视频也会减少。
任何帮助都会很棒！
【问题讨论】：
标签： css wordpress iframe youtube
如果主页上的这些图像来自“设置特色图像”方法，您可以对视频进行屏幕抓取，调整其大小并将其用作“特色图像”。
【讨论】：
我在 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 网站上尝试了该代码，并且成功了。
【讨论】：