如何制作完整部分的 youtube 视频背景封面

Question

我正在做一个带有 Youtube 视频背景的部分，到目前为止视频工作正常，但我发现没有办法让视频背景覆盖整个部分，无论屏幕尺寸如何，背景都不应该看到视频之间的黑边，如附件截图，如何通过扩展视频而不改变该部分的高度来去除那些黑边？谁能告诉我如何处理下面的代码？

#story .videoBg {
    position: relative;
    height: 700px;
}

#story .videoFg, #story .videoBg iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -99;
}

#story .overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.videoBg .subTxt { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    color: #FFF;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    z-index: 2;
}


<section id="story" class="main story">
    <div>
        <div class="videoBg text-center">
            <div class="videoFg">
                <iframe src="https://www.youtube.com/embed/ab0TSkLe-E0?version=3&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&amp;playlist=ab0TSkLe-E0" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <div class="subTxt text">
                <h3>Origin Story</h3>
                <p></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="spacer_md"></div>
<p><a class="play no-button" style="display:unset;" href="https://www.youtube.com/embed/2L515SmPbRw?autoplay=1&amp;rel=0">Watch video</a></p>
<p></p>
            </div>
            <div class="overlay"></div>
        </div>
    </div>
</section>

Answer 1

你可以通过在下面添加css

来实现

* {padding:0;margin:0;box-sizing:border-box;}

.videoFg {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0 !important;
}
.videoFg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

REF：

#story .videoBg {
    position: relative;
    height: 700px;
}

#story .videoFg, #story .videoBg iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -99;
}

#story .overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.videoBg .subTxt { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    color: #FFF;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    z-index: 2;
}

/* FROM HERE */
* {padding:0;margin:0;box-sizing:border-box;}
.videoFg {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0 !important;
}
.videoFg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

<section id="story" class="main story">
    <div>
        <div class="videoBg text-center">
            <div class="videoFg">
                <iframe src="https://www.youtube.com/embed/ab0TSkLe-E0?version=3&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1&amp;playlist=ab0TSkLe-E0" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <div class="subTxt text">
                <h3>Origin Story</h3>
                <p></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="spacer_md"></div>
<p><a class="play no-button" style="display:unset;" href="https://www.youtube.com/embed/2L515SmPbRw?autoplay=1&amp;rel=0">Watch video</a></p>
<p></p>
            </div>
            <div class="overlay"></div>
        </div>
    </div>
</section>

Answer 2

试试这个来替换#story .videoFg、#story .videoBg iframe

#story .videoFg{
 overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
#story .videoBg iframe {
      left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;

}

如何制作完整部分的 youtube 视频背景封面

How to make youtube video background cover in full section

html

css

video

background