youtube 视频屏幕黑条场景答案

【问题标题】：youtube video screen black bars scenarioyoutube 视频屏幕黑条场景
【发布时间】：2017-12-30 16:16:08
【问题描述】：

如何使 youtube 视频全屏宽度和高度，但使视频全尺寸，即使调整大小，它也会完全填满整个屏幕，但我不希望在调整大小时出现黑条.

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; height: 0; 
    overflow: hidden;
    z-index: 1;
}
.video-container .video {
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.video-container iframe,
.video-container object,
.video-container embed {
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    right: 0; 
    bottom: 0;
}

HTML

<div class="video-container">
    <div class="video">
        <iframe width="853" height="480" src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

【问题讨论】：

标签： html css youtube

【解决方案1】：

在 CodePen 上查看以调整视口大小以查看响应能力。
https://codepen.io/rickydam/pen/dzyEoR/left/

参考这个类似的问题。
Responsive fullscreen youtube video with no black bars?

本文总结了使用 CSS 嵌入响应式 Youtube 视频。
https://avexdesigns.com/responsive-youtube-embed/

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：