Html 没有黑条的响应式全屏 youtube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26617154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive fullscreen youtube video with no black bars?
提问by Owly
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 视频来做到这一点？
采纳答案by Daniel Patilea
回答by Mike
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"});
});
回答by JWC May
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.comis the Source URL of this answer.
这个coolestguidesontheplanet.com是这个答案的源 URL。
回答by kushal parikh
To simulate the same effect, the important thing is to maintain aspect ratio which is 16:9.
要模拟相同的效果，重要的是保持 16:9 的纵横比。
HTML
HTML
<div class="banner-video">
<iframe src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1&playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS
CSS
iframe{
width: 100%;
height: calc((100vw*9) /16);
}
This will remove black bars.
这将删除黑条。
Now we can set the outer container to 100% width and 100% height and hide the overflow.
现在我们可以将外部容器设置为 100% 宽度和 100% 高度并隐藏溢出。
.banner-video{
height: 100vh;
overflow: hidden;
}
Now the above code will work until viewport aspect ratio is greater than 16/9. So we have to add media query based on aspect ratio.
现在上面的代码将一直工作，直到视口纵横比大于 16/9。所以我们必须添加基于纵横比的媒体查询。
@media (max-aspect-ratio: 16/9) {
.banner-video{
width: 100%;
overflow: hidden;
}
iframe{
width: calc((100vh*16)/9);
height: 100vh;
}
}
After this youtube video will maintain full viewport size at all condition and hide the extra part of a video. Other then opera it's supported in all the browser.
此 youtube 视频将在所有条件下保持完整的视口大小并隐藏视频的额外部分。除此之外，所有浏览器都支持opera。
回答by Luciano Laranjeira
If you're looking just for CSS (no JS).
如果您只是在寻找 CSS（没有 JS）。
Videos with 16:9 ratio such as 1920x1080 or 1280x720...
16:9 比例的视频，例如 1920x1080 或 1280x720...
Here is my code (It's working in my case):
这是我的代码（它在我的情况下有效）：
.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%;
}
回答by Tosin John
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'});
}
回答by CreativeR
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% 的容器中，并使其 display:flex 并使内容居中！
回答by Ranjot Singh
You can also use this below:-
您也可以在下面使用它：-
<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>
回答by Ranjot Singh
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"});
});
