将YouTube视频缩小到响应宽度

时间：2013-04-05 22:12:49

标签： youtube responsive-design embed

我在我们的网站上嵌入了YouTube视频，当我将屏幕缩小到平板电脑或手机尺寸时，它会在宽度约为560像素时停止缩小。这是YouTube视频的标准，还是我可以添加一些内容以使其变小？

11 个答案:

答案 0 :(得分：256)

您可以使用CSS响应YouTube视频。使用“videowrapper”类将iframe包装在div中并应用以下样式：

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videowrapper div应位于响应元素内。 .videowrapper上的填充对于防止视频崩溃是必要的。您可能需要根据布局调整数字。

答案 1 :(得分：26)

如果您使用的是Bootstrap，您还可以使用自适应嵌入。这将完全自动化使视频响应。

http://getbootstrap.com/components/#responsive-embed

下面有一些示例代码。

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

答案 2 :(得分：9)

我在接受的答案中使用了CSS，用于我的响应式YouTube视频 - 直到YouTube在2015年8月初更新系统之前一直运行良好.YouTube上的视频尺寸相同但无论出于何种原因，CSS中的视频接受答案现在我们所有的视频都是letterbox。顶部和底部的黑色条带。

我已经对尺寸进行了调整，并决定摆脱顶部填充并将底部填充更改为.videowrapper { position: relative; padding-bottom: 56.45%; height: 0; } 。看起来好看。

switch

答案 3 :(得分：7)

使用jQuery为YouTube和Vimeo提供仅限Javascript的解决方案。

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});

只使用embed：

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

或者像Bootstrap这样的响应式样式框架。

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  • 依靠iframe的宽度和高度来保持宽高比
  • 宽高比（width="16" height="9"）
    • 可以使用宽高比
  • 在调整大小之前等待文档准备好
  • 使用jQuery子串*=选择器而不是字符串^=
    • 的开头
  • 从视频iframe parent而不是预定义元素
    • 获取引用宽度
  • Javascript解决方案
  • 没有CSS
  • 不需要包装

感谢@Dampas的起点。 https://stackoverflow.com/a/33354009/1011746

答案 4 :(得分：1)

这是旧帖子，但我在https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

找到了新答案

以前的解决方案存在的问题是，您需要在视频代码周围使用特殊的div，这不适合大多数用途。所以这里是没有特殊div的JavaScript解决方案。

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS

答案 5 :(得分：1)

@ magi182的解决方案很稳定，但它缺乏设置最大宽度的能力。我认为最大宽度为640px是必要的，因为其他youtube缩略图看起来像素化。

我的两个包装器的解决方案对我来说就像一个魅力：

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

我还将内包装中的填充底部设置为50％，因为@ magi182的56％，顶部和底部出现黑条。

答案 6 :(得分：1)

现代简单的 css 解决方案

新的 aspect-ratio 是此问题的现代解决方案。

aspect-ratio: 16 / 9;

这就是自动制作 div、图像、iframe 大小所需的全部内容。 Samples。

它有 good support，但还没有在 Safari 中（将用于即将到来的 iOS15） - 所以现在你仍然需要使用后备。您可以使用@supports 功能实现这一点

.element 
{
   aspect-ratio: 16 / 9;

   @supports not (aspect-ratio: 16 / 9) 
   {
       // take your pick from the other solutions on this page
   }
 }

假设您的开发浏览器确实支持此属性，请务必在没有它的情况下通过注释掉 aspect-ratio 和 @supports 进行测试。

答案 7 :(得分：0)

See full gist here和live example here。

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

只有在Youtube播放器完全加载后（页面加载不起作用），并且每当调整浏览器窗口大小时，才会调用resizeHeroVideo。运行时，它会计算iframe的高度和宽度，并指定保持正确宽高比的适当值。无论窗口是水平调整还是垂直调整，都可以正常工作。

答案 8 :(得分：0)

归功于上一个答案https://stackoverflow.com/a/36549068/7149454

与Bootstrap兼容，调整您的容器宽度（在此示例中为300px），就可以了：

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

答案 9 :(得分：-1)

好的，看起来像是大解决方案。

为什么不直接在iframe中添加width: 100%;。 ;）

因此，您的代码看起来像<iframe style="width: 100%;" ...></iframe>

试试这个它会起作用，因为它适用于我的情况。

享受！ ：）

答案 10 :(得分：-2)

我用简单的css制作如下

HTML CODE 

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

CSS代码

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}

相关问题
最新问题