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：disabling blackbars on youtube embed iFrame

#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视频背景封面

2 个答案: