Question

在网站上工作并遇到视频输出问题。

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

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

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

任何帮助都会很棒！

Answer 1

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

Answer 2

我在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网站上尝试了代码，但它确实有效。

Wordpress - 在主页上更改视频（iframe）维度

2 个答案: