1

I need one of the section background load with a full-width youtube video, I did the code below which have no issue with the video background, but the other section is overlapped and not display properly, what to do to make the other section to show up one after another?

<style>
.video-foreground,
.video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
    .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .video-foreground { width: 300%; left: -100%; }
}

.sub-content { 
    position: absolute;
    top: 0px;
    padding: 30px;
    color: #FFF;
    text-shadow: #000 2px 2px;
}
</style>
</head>

<body>

    <section id="content1" style="background-color:#ccc;">
        <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. </p>
    </section>


    <section>
        <div class="video-background">
            <div class="video-foreground">
                <iframe src="https://www.youtube.com/embed/2L515SmPbRw?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

        <div class="sub-content">
            <h1>Hello World!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </section>


    <section id="content2" style="background-color:#ddd;">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet.</p>
    </section>

</body>
The Grimmer
  • 47
  • 1
  • 6
  • the answer is here: https://stackoverflow.com/questions/59150821/how-to-make-youtube-video-background-cover-in-full-section – Nanny Boy Dec 03 '19 at 08:00

1 Answers1

0
.video-wrapper {
    position: relative;
    padding: 25px 0 56.25% 0; /*16:9*/
    height: 0;
    margin-bottom: 50px;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  .sub-content {
    position: absolute; 
    top: 5%;
    color: #ffffff;
  }
}
.info {
  position : relative;
  width: 100%;
  clear: both;
  background: #f8c1cb;
}

https://codepen.io/pgurav/pen/GRgRpZP

Not got your question exactly. But hope this is something what are you looking for

Priyanka
  • 287
  • 1
  • 11
  • I want the section#content1 and section#content2 to be displayed between in the section video background, now it's only the video background section is shown in the page – The Grimmer Dec 02 '19 at 06:16
  • So section#content1 and section#content1 should be displayed on video ? – Priyanka Dec 02 '19 at 06:22
  • No, section#content1 and content2 is not part of video section, they are separate – The Grimmer Dec 02 '19 at 06:25
  • Can you please explain me what layout you want exactly ? As first video with 100% width and on video you want to display sub-content then bellow video (bottom of video) section#content1 and below that section#content2 ? – Priyanka Dec 02 '19 at 06:28
  • the layout is pretty simple, all section is display one after another, section#content1 > section (video background) > section#content2, my problem is section#content1 and section#content2 is not display properly due to the section video is overlapping them – The Grimmer Dec 02 '19 at 06:35
  • clear now !. Updated above codepen link as per your requirement. Please have look – Priyanka Dec 02 '19 at 06:48
  • sorry not working for full video background at all, it's not responsive too – The Grimmer Dec 02 '19 at 08:57