0

我有 fitVids 在我的网站上工作。但是，我想知道是否可以防止 fitVids 将视频放大到超出其定义的高度/宽度。例如，如果一个视频是 600px 宽，但容器是 800px，fitVids 将视频放大到 800px 宽，它是模糊的。当容器为较小的设备缩小时，我只希望 fitVids 缩小视频。那可能吗？ 

jQuery(document).ready(function(){
  // Target your .container, .wrapper, .post, etc.
  $("#thing-with-videos").fitVids();
});
4

4 回答 4

2

helgatheviking 的解决方案限制了视频的宽度，但不限制高度。如果您的容器比视频宽，那么您最终会得到一个非常高的信框视频。高度很容易固定，使用相同的技术来约束宽度。但是，还有第三个变量。

fitVids 用“fluid-width-video-wrapper”类将 iframe 包装在一个 div 中，并将 padding-top 设置为等于视频的纵横比。即使高度和宽度受到限制，如果没有最大高度，流体宽度视频包装器仍将与视频一样高。因此，您最终会在视频下方看到一堆空白。

无需设置所有三个值（宽度、高度和填充），您可以通过在初始化 fitvids 之前将 iframe 包装在具有最大宽度的 div 中来简化一切。

var vidFrame = $('#fitvids_container').find('iframe');
var vidWidth = vidFrame.attr('width');

if (typeof vidWidth !== undefined) {
    // Wrap the iframe in a Div with max-width defined
    vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>');
}

// Initialize fitVids
$('#fitvids_container').fitVids();

像 helgatheviking 的解决方案一样，如果每页有多个视频，则必须计算每个视频的最大宽度。

于 2015-02-21T15:26:40.930 回答
2

一种选择是对 fitvids 代码进行小的修改，该代码检查 data-maxwidth 属性，如果找到，则使用 max-width 样式包装 div 以限制调整大小的 iframe。

这允许独立指定每个视频的最大宽度行为。

例如。将 data-maxwidth 属性添加到 iframe。

<iframe width="560" height="315" data-maxwidth="560" src="https://www.youtube.com/embed/L-UIiRlydow" frameborder="0" allowfullscreen=""></iframe>

然后将以下代码片段添加到 fitvids.js 文件中，在 $allVideos.each 函数的末尾，就在 $this.removeAttr('height').removeAttr('width'); 之后

if ($this.data("maxwidth"))
    $this.parent('.fluid-width-video-wrapper').wrap('<div></div>').parent().css('max-width', $this.data("maxwidth"));
于 2015-07-03T09:36:14.473 回答
1

很简单！

假设“thing-with-videos”是您调用 .fitvids() 的包装器的 ID

所以只需设置这个容器的最大宽度 css 属性。

例子：

#thing-with-videos {
max-width: 600px;
margin: 0px auto;
}

这不会让您的视频宽度超过 600 像素。Margin 属性将使您的视频容器居中。

实时编辑演示 - http://bitconfig.com/fit-vids/bitconfig_fitvids.html

在“视频容器宽度”文本框中设置您的自定义宽度并观看预览！

-帕特里克

于 2014-01-22T19:09:00.047 回答
0

帕特里克的回答最终让我意识到我可以在 iframe 本身上设置一个最大宽度。

#fitvids_container {
    max-width: 600px;
}

#fitvids_container iframe {
    max-width: 500px;
}

但是，如果您使用大量视频（大小不同），您可能希望动态执行此操作。使用 jQuery，我们可以从 iframe 属性中获取宽度，并使其成为最大宽度样式规则。这仅在您在嵌入代码中包含 width 属性时才有效。这是一个示例，但可以适应.each()循环或至少将容器 div 重命名为类。

var width = $('#fitvids_container').find('iframe').attr('width');

if (typeof width !== undefined) {
    $('#fitvids_container').find('iframe').css('maxWidth', width + 'px');
}

看我的例子：http: //jsfiddle.net/Qd4FW/2/

于 2014-02-10T12:03:52.343 回答