没有黑条的响应式全屏youtube视频？
我有一个全屏youtube视频嵌入在我的网站上。
当浏览器的大小与视频的宽度和高度成正比时，它看起来很好。但是，当我将浏览器的大小调整到不同的比例时，视频周围会出现黑条。
我想要的是让视频填充整个窗口的所有时间，但没有任何拉伸。我希望“多余的”隐藏时，浏览器的大小不成比例的视频。
我正在努力实现的是你可以在这两个网站的背景中看到的东西：http://ginlane.com/和http://www.variousways.com/。
有没有可能用youtube视频做到这一点？
回答 8
Stack Overflow用户
发布于 2016-06-17 17:17:29
这是相当古老的，但这里的人们可能仍然需要帮助。我也需要这个，所以我创建了一个我的解决方案的笔，这应该会有帮助- 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"});
});Stack Overflow用户
发布于 2017-11-25 20:21:41
在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。
Stack Overflow用户
发布于 2018-08-01 02:28:39
要模拟相同的效果，重要的是保持16:9的纵横比。
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
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之外，所有的浏览器都支持它。
https://stackoverflow.com/questions/26617154
复制相似问题
腾讯云开发者
