将YouTube视频缩小到响应宽度


125

我在我们的网站上嵌入了YouTube视频,当我将屏幕缩小为平板电脑或手机大小时,它停止缩小的宽度约为560像素。这是YouTube视频的标准,还是我可以在代码中添加一些内容以使其变得更小?


1
生成响应式嵌入代码的好资源:embedsensitively.com
ThisClark '17

Answers:


268

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


谢谢!我必须在#content上添加width:100%,以确保它是响应元素。
MattM


1
就我而言,应用此CSS时视频不会出现。
basZero 2015年

5
上的数字的详细说明56.25%25px可在读alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25%:要创建16:9的比例,我们必须由16(0.5625或56.25%)除以9。 padding-top: 25px注意:为避免损坏的盒子模型(古怪模式下的IE5或IE6)出现问题,我们使用padding-top而不是height来为镀铬留出空间。
2016年


26

如果您使用的是Bootstrap,则还可以使用响应式嵌入。这将完全自动化,使视频具有响应能力。

http://getbootstrap.com/components/#sensitive-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>

1
值得补充的是,您应该将这些内容插入一些col-sm ...等中,以免使视频变宽。
黎明

这太神奇了
jastr

此外,要保持视频居中,请不要忘记使用偏移量。例如:col-sm-8 col-sm-offset-2
Nicolas

9

我在此处将响应式YouTube视频的接受答案中使用了CSS-一直很好用,直到YouTube在2015年8月初左右更新系统为止。YouTube上的视频尺寸相同,但是无论出于何种原因,现在接受答案中的CSS将我们所有的视频信箱。顶部和底部有黑带。

我已经仔细研究了大小,并决定摆脱顶部填充并将底部填充更改为56.45%。看起来不错。

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

1
只是对此的更新-有时视频中使用的旧占位符图像使顶部和底部仍然出现黑带,但是当您实际开始播放时,视频本身在此新设置下看起来不错。Grrr,谢谢YouTube。
McNab 2015年

1
谢谢。使用填充底部:尽管我似乎正在使用缩略图和视频本身的长宽比不匹配,但50%的像素已摆脱了我正在使用的视频的顶部和底部黑条……
MSC

8

使用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


完美的作品!非常感谢您:)
Laran Evans

这会有所帮助。特别是在您无法控制HTML元素(但是JS)并且无法设置视频包装的情况下。谢谢。
Kai Noack

请注意,此解决方案会将resize事件与JavaScript函数绑定在一起,当添加更多事件时,这可能会给浏览器造成压力。请记住,您可以使用JavaScript将iframe包装在wrapper div中,以使CSS处理响应式样式并提高性能。
railgun

我尝试了许多解决方案。这是Internet上使YouTube视频具有响应能力的最佳解决方案。
丹·尼克

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

1

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

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


这对于尝试嵌入响应式视频的我来说效果更好,但是要指定宽度(最大宽度)。
yougotiger

1

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

兼容Boostrap,调整您的容器宽度(在此示例中为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>

0

在此处查看完整要点,在此处查看实时示例

#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的高度和宽度,并分配适当的值以保持正确的宽高比。不管水平或垂直调整窗口大小都可以。


-1

好的,看起来很不错。

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

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

尝试此操作,因为它对我而言有效。

请享用!:)


5
由于这种不正确调整高度的视频,因此显示的控制,黑条,接受的答案是一个更好的解决方案
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

由于这是制作带有嵌入式iframe的自适应视频的起点,因此我相信该解决方案可以正确回答问题。将其与网格系统结合使用,高度是唯一剩下的问题。=>(容器宽度/ 12)* 9 =高度。
Tim Vermaelen'1

-2

我用简单的css如下

HTML代码

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

}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.