如何在流体设计中定义嵌入播放器高度以保持纵横比？ （当宽度为100%时）

Question

有没有办法将嵌入播放器视为流体设计中的图像？

我通常将图像的宽度设置为100%，并让浏览器计算高度（现代浏览器以原始宽高比缩放图片）。

元素的情况并非如此。我意识到没有给出视频信息，但它应该以某种方式可用，没有固定的像素值。在大多数情况下，仅使用 16:9 和 4:3 的宽高比。如果可以添加这两个值，那将是一个很大的帮助。

使用 width="100%" 和/或 style="width: 100%;" 嵌入的视频会正确（水平）填充容器。 高度应该是（宽度/4*3）或（宽度/16*9），但据我所知，没有办法计算它。

我更喜欢没有内联样式的解决方案，即使高度和宽度属性是必需的/推荐的，我也不喜欢在 HTML 中添加任何指定的长度值。 CSS 解决方案或嵌入视频的“秘密”参数将是理想的选择。如果有一个特定于 YouTube 的解决方案，那对我来说就足够了。

Answer 1

这个解决方案对我来说非常有效。

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

^ CSS 仅适用于液体 YouTube 嵌入尺寸。

这样你就可以完全删除 iframe 的高度和宽度属性。它将自动适应其父容器的宽度。

Answer 2

你可以用 jQuery 来做到这一点。像这样的东西：

HTML：

<div>
<iframe></iframe>
</div>

JS：

var width = $('div').width();
var ratio = 16/9;
var height = width/ratio + 32; /* 32px is approx. height of controls */
$('iframe').css('height', height);

但是，如果您想要该功能，您也必须在 window.resize 上执行此操作。

Answer 3

另外，请查看 über-guru Chris Coyer 设计的这个小 jQuery 插件：http://fitvidsjs.com

Answer 4

我只需要为一个项目执行此操作，其中我有一个嵌入的 YouTube 视频，位于背景图像顶部的页面中心，该视频设置为显示 100vh x 100vh 减去标题和粘性导航栏的一点空间。重要的是，YouTube 视频不仅要缩放，而且要与图像底部保持精确的 30 像素边距。

因此，我在页面加载时设置相对于窗口大小的背景图像的大小，并在 onYouTubeIframeAPIReady 函数中定义 iframe 的尺寸，该函数仅在加载框架后由 Youtube API 调用。我在窗口调整大小方面也有相同的功能，这样如果您调整浏览器窗口的大小，它就会流畅地缩放。

由于垂直边距是一个重要问题，因此我从高度开始，根据背景图像的高度减去边距所需的空间来设置 iframe 的高度。然后，我将高度除以 9 再乘以 16，手动计算出宽度的 16:9 纵横比。

$( document ).ready(function() {
    var content = $('#hero');
    var contentH = $(window).height() - 158;
    var contentW = $(window).width();
    content.css('height',contentH);
} );
$(window).resize(function() {
    var content = $('#hero');
    var iframe = $('.videoWrapper iframe');
    var contentH = $(window).height() - 158;
    var iframeH = contentH - 150;
    content.css('height',contentH);
    iframe.css('height',iframeH);
    var iframeW = iframeH/9 * 16;
    iframe.css('width',iframeW);
    var margin = ($(window).width() - iframeW) / 2;
    $('.videoWrapper').style.marginLeft = margin;
} );

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <hgroup class="span12 text-center" role="heading">
                <h1></h1>
                <h2></h2>
            </hgroup>
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
                <div class="videoWrapper">
                    <div id="player"></div>
                </div>
            </center>
            <script>
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    videoId:'xxxxxxxxx',playerVars: {
                        controls:0,enablejsapi:1,iv_load_policy:3
                    }
                } );
                var content = $('#hero');
                var iframe = $('.videoWrapper iframe');
                var contentH = $(window).height() - 158;
                var contentW = $(window).width();
                var iframeH = contentH - 150;
                iframe.css('height',iframeH);
                var iframeW = iframeH/9 * 16;
                iframe.css('width',iframeW);
            }
            </script>
        </div>
    </div>
</div>