How To Make Youtube Video Background Cover In Full Section

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 scree

Solution 1:

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;

}

Solution 2:

You can achieve it by adding below 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>