133

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

4

10 回答 10

292

您可以使用 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 上的填充是防止视频折叠所必需的。您可能需要根据您的布局调整数字。

于 2013-04-05T22:18:58.103 回答
29

如果您使用的是 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>
于 2016-04-11T12:44:52.543 回答
10

使用 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();
});

只需嵌入即可简单使用：

<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 父级而不是预定义元素获取参考宽度
  • Javascript 解决方案
  • 没有 CSS
  • 无需包装

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

于 2015-11-14T13:36:26.597 回答
9

我在此处接受的答案中使用 CSS 来处理我的响应式 YouTube 视频 - 在 YouTube 于 2015 年 8 月左右更新他们的系统之前效果很好。YouTube 上的视频尺寸相同，但无论出于何种原因，现在接受的答案中的 CSS信箱我们所有的视频。顶部和底部有黑色条纹。

我已经对尺寸进行了调整，并决定摆脱顶部填充并将底部填充更改为56.45%. 似乎看起来不错。

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}
于 2015-08-14T14:32:18.937 回答
4

@magi182 的解决方案是可靠的，但它缺乏设置最大宽度的能力。我认为 640 像素的最大宽度是必要的，因为否则 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 % 时，顶部和底部出现了一个黑条。

于 2016-04-06T13:50:16.713 回答
3

现代简单的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。

于 2021-07-18T21:02:06.257 回答
2

这是旧线程，但我在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
于 2015-10-26T19:27:57.373 回答
1

归功于先前的答案https://stackoverflow.com/a/36549068/7149454

Boostrap 兼容，调整您的容器宽度（在本例中为 300 像素），您就可以开始了：

<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>
于 2019-04-11T07:23:53.510 回答
-2

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

为什么不width: 100%;直接添加到您的 iframe 中。;)

所以你的代码看起来像<iframe style="width: 100%;" ...></iframe>

试试这个，它会像我的情况一样工作。

享受！:)

于 2016-05-26T07:42:23.243 回答
-2

我用简单的css做这个如下

代码

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

}

于 2017-03-18T10:41:56.960 回答