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

| 有没有办法在流畅的设计中像图像一样对待嵌入式播放器？我通常将图像的宽度设置为100％，然后让浏览器计算高度（现代浏览器以原始宽高比缩放图片）。 <embed>元素不是这种情况。我意识到没有提供视频信息，但应该可以使用它，而无需固定像素值。在大多数情况下，仅使用16：9和4：3宽高比。如果仅可以添加这两个值，那将是一个很大的帮助。使用ѭ1和/或ѭ2，嵌入式视频可以正确（水平）填充容器。高度应为（宽度/ 4 * 3）或（宽度/ 16 * 9），但据我所知无法计算。我希望没有内联样式的解决方案，即使高度和宽度属性是必需/推荐的，我也不愿意在HTML中添加任何指定的长度值。嵌入式视频的CSS解决方案或\“ secret \”参数将是理想的选择。如果有YouTube特定的解决方案，对我来说就足够了。

已邀请:

4 个回复

翰冒绢县

该解决方案对我来说非常有效。 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php ^ CSS仅液体YouTube嵌入尺寸。使用此工具，您可以完全删除iframe的height和width属性。它会自动适应其父容器的宽度。

捻盒愧杯

您可以使用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上执行此操作。

链眷克袒姜

另外，请查看über-guruChris Coyer制作的这个jQuery小插件：http://fitvidsjs.com

掏得透垦滩

我只需要为一个项目执行此操作，在该项目中，我的嵌入式youtube视频位于背景图片顶部的页面中心，该背景图片设置为显示100vh x 100vh减去标题和stickynav条的空间。 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>

要回复问题请先登录或注册

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

4 个回复

发起人

aspect_ratio

html

css

embed

fluid

问题状态

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

与内容相关的链接

4 个回复

发起人

aspect_ratio

html

css

embed

fluid

问题状态

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