将YouTube视频缩小到响应宽度

Question

我在我们的网站上嵌入了一个YouTube视频,当我将屏幕缩小到平板电脑或手机尺寸时,它的宽度大约会缩小到560px.这是YouTube视频的标准还是我可以在代码中添加一些内容以使其变小？

Answer 1

您可以使用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上的填充对于防止视频崩溃是必要的.您可能需要根据布局调整数字.

Answer 2

如果您使用的是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>

Answer 3

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

我已经对尺寸进行了调整,并决定摆脱顶部填充并将底部衬垫更改为56.45%.看起来好看.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

Answer 4

使用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的起点. /sf/answers/2334780661/

Answer 5

现代简单的CSS解决方案

新的纵横比是解决这个问题的现代解决方案。

aspect-ratio: 16 / 9;

这就是自动设置 div、图像、iframe 大小所需的全部内容。样品。

它得到了良好的支持，但尚未出现在 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。

Answer 6

@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>

我还将内部包装器中的 padding-bottom 设置为 50%，因为使用 @magi182 的 56%，顶部和底部会出现黑色条。