1

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

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

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

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

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

4

4 回答 4

2

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

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

^ CSS 仅液体 youtube 嵌入尺寸。

有了这个，您可以完全删除 iframe 的高度和宽度属性。它会自动适应它的父容器的宽度。

于 2011-10-04T19:09:01.063 回答
1

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

于 2011-05-27T22:29:59.797 回答
0

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

于 2012-08-29T23:25:59.420 回答
0

我只需要为一个项目执行此操作，在该项目中，我有一个嵌入的 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>
于 2014-07-17T06:45:36.403 回答