响应式全屏YouTube视频，没有黑条？

I have a fullscreen youtube video embedded on my website.

我在我的网站上嵌入了全屏YouTube视频。

It looks good when the size of the browser is proportional to the video’s width and height. However, when I resize the browser to a different proportion, I get black bars around the video.

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

What I want is to have the video fill the whole window at all times, but without any stretching. I want the “excess” to hide when the browser size is not proportional to the video.

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

What I am trying to achieve is something you can see in the background of these two websites: http://ginlane.com/ and http://www.variousways.com/.

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

Is it possible to do this with a youtube video?

是否可以使用YouTube视频执行此操作？

7 个解决方案

#1

• Check this: Fullscreen video without black borders
• 检查：全屏视频没有黑色边框
• Or this: http://avexdesigns.com/responsive-youtube-embed/
• 或者：http：//avexdesigns.com/responsive-youtube-embed/
• Or this one: http://css-tricks.com/fluid-width-youtube-videos/
• 或者这个：http：//css-tricks.com/fluid-width-youtube-videos/

#2

This is pretty old but people may still need help here. I needed this too so have created a Pen of my solution which should help - http://codepen.io/MikeMooreDev/pen/QEEPMv

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

The example shows two versions of the same video, one as standard and the second cropped and centrally aligned to fit the size of the full parent element without showing the hideous black bars.

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

You need to use some javascript to calculate a new width for the video but it's really easy if you know the aspect ratio.

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

HTML

HTML

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

CSS - The height and width o the videoWrapper can be anything, they can be percentages if you so wish

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

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

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

jQuery

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"});

});

This can also be triggered on resize to ensure it remains responsive. The easiest (probably not most efficient) way to do this is with the following.

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

$(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"});

});

#3

Create a container div around the iframe code and give it a class eg:

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

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

Add in the CSS:

添加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%;
}

This coolestguidesontheplanet.com is the Source URL of this answer.

这个coolestguidesheheplanet.com是这个答案的来源网址。

#4

I'm posting this because the answers above are for when you have the black bars at the top and at the bottom. What if you have the bars on the sides (left and right). This script will take care of the two scenario.

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

    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'});

}

#5

I spent a lot of time trying to figure this out but here's a simple CSS solution that works for me using Flexbox. Basically, put the video in a container with position absolute and width and height 100% and the make it display:flex and center the content!

我花了很多时间试图解决这个问题，但这是一个简单的CSS解决方案，适用于我使用Flexbox。基本上，将视频放在一个绝对位置，宽度和高度均为100％的容器中，并使其显示：弹性和居中内容！

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

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

#6

Sadly this doesn't seem to be working.... Unless I am missing something: http://codepen.io/Archie22is/pen/EWWoEM

可悲的是，这似乎没有用......除非我遗漏了什么：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"});

});

#7

You can also use this below:-

您也可以使用以下内容： -

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