如何完整制作youtube视频背景封面 [英] How to make youtube video background cover in full section

问题描述

我正在用Youtube视频背景做一个部分，到目前为止，视频工作正常，但是我发现没有办法使视频背景完整显示，无论屏幕大小如何，背景都看不到视频之间的黑色部分(如所附的屏幕截图)，如何通过扩展视频而无需更改该部分的高度来消除那些黑色部分?谁能照亮我如何处理下面的代码?

I'm doing a section with Youtube video background and so far the video is working fine, but I found no way to make the video background to cover in full section, for whatever screen size view, the background should not see the black-side in between the video, as attached screenshot, how to get rid of those black-side by expand the video without change the height of the section? can anyone lighten me how to deal with the code below?

#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>

推荐答案

尝试使用此方法替换#story .videoFg，#story .videoBg iframe

Try this to replace #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视频背景封面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！