没有黑条的响应式全屏 youtube 视频？答案

【问题标题】：Responsive fullscreen youtube video with no black bars?没有黑条的响应式全屏 youtube 视频？
【发布时间】：2014-12-24 09:04:53
【问题描述】：

我的网站上嵌入了一个全屏 youtube 视频。

当浏览器的大小与视频的宽度和高度成正比时，它看起来不错。但是，当我将浏览器调整为不同的比例时，视频周围会出现黑条。

我想要的是让视频始终填满整个窗口，但没有任何拉伸。当浏览器大小与视频不成比例时，我希望隐藏“多余”。

我想要实现的是你可以在这两个网站的背景中看到的东西：http://ginlane.com/ 和 http://www.variousways.com/。

是否可以通过 youtube 视频做到这一点？

【问题讨论】：

标签： html css video youtube

【解决方案1】：

这已经很老了，但人们可能仍然需要帮助。我也需要这个，所以我创建了一个我的解决方案的笔，这应该会有所帮助 - http://codepen.io/MikeMooreDev/pen/QEEPMv

该示例显示了同一视频的两个版本，一个为标准版本，第二个被裁剪并居中对齐以适应整个父元素的大小，而不显示可怕的黑条。

您需要使用一些 javascript 来计算视频的新宽度，但如果您知道宽高比，这真的很容易。

HTML

<div id="videoWithNoJs" class="videoWrapper">
  <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

CSS - videoWrapper 的高度和宽度可以是任何值，如果你愿意，它们可以是百分比

.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

.videoWrapper iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}

jQuery

$(document).ready(function(){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

这也可以在调整大小时触发，以确保它保持响应。最简单（可能不是最有效）的方法是使用以下方法。

$(window).on('resize', function() {

    // Same code as on load        
    var aspectRatio = 1.78;
    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

【讨论】：

【解决方案2】：

遗憾的是，这似乎不起作用....除非我遗漏了什么： http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

【讨论】：

【解决方案3】：

我发布这个是因为上面的答案适用于顶部和底部都有黑条的情况。如果您在侧面（左侧和右侧）有横条怎么办。此脚本将处理这两种情况。

    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio < vidRatio){
    var newWidth  = wrapperWidth  * (vidRatio/wrapperRatio);
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'});

}
else{
    var newHeight  = wrapperHeight   * (wrapperRatio / vidRatio);
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'});

}

【讨论】：

很好的解决方案 :) 谢谢。顺便提一句。当包装器的宽度和高度都小于视频的宽度和高度时，它不会在包装器的中间正确居中。

【解决方案4】：

我花了很多时间试图解决这个问题，但这里有一个简单的 CSS 解决方案，它适用于我使用 Flexbox。基本上，将视频放在绝对位置、宽度和高度为 100% 的容器中，并使其 display:flex 并使内容居中！

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

【讨论】：

【解决方案5】：

你也可以在下面使用这个：-

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>

【讨论】：

【解决方案6】：

围绕 iframe 代码创建一个容器 div 并给它一个类，例如：

<div class="video-container"><iframe.......></iframe></div>

在 CSS 中添加：

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

coolestguidesontheplanet.com 是此答案的源 URL。

【讨论】：

这对我有用，我唯一需要删除的是 padding-top
在我设置 padding-top: 0; 之前我仍然有黑条然后它起作用了。

【解决方案7】：

要模拟相同的效果，重要的是要保持 16:9 的纵横比。

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

这将删除黑条。

现在我们可以将外部容器设置为 100% 宽度和 100% 高度并隐藏溢出。

.banner-video{
  height: 100vh;
  overflow: hidden;
}

现在上述代码将一直工作到视口纵横比大于 16/9。所以我们必须添加基于纵横比的媒体查询。

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

此 youtube 视频将在所有情况下保持完整的视口大小并隐藏视频的额外部分。其他所有浏览器都支持opera。

【讨论】：

【解决方案8】：

如果您只是在寻找 CSS（没有 JS）。

16:9 比例的视频，例如 1920x1080 或 1280x720...

这是我的代码（在我的情况下有效）：

.video {
    position: relative;
    height: 0; 
    padding-bottom: 56.25%; /*16:9*/
    padding-top: 0; /* Use ZERO, not 25px or 30px and so on */
    overflow: hidden;
}

.video > iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

【讨论】：