How To Create a Background Video That Is Overlapped By Text

Hello,

I am currently working on the personal portfolio project for the web development certificate in freeCodeCamp. I want to add a full background video that goes under the Hello header text at the top. Here is what I have so far.

HTML:

<div id="welcome-section">
      <!-- The video -->
<video  src="https://youtu.be/0EVVKs6DQLo"  autoplay muted loop id = "myVideo>
      </video>
      <h1> Hello </h1>
      </div>``'

CSS:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

Ive tried using the content in this link to help me but the video won't show up and play as the background for the "hello" section. Any help is appreciated thankyou.

I’m not sure you can embed a youtube video like that. I’ve always used their iframe embed code to do it but I will admit I’m not an expert on embedding youtube videos.

YouTube Help: Embed videos

Once you do get a video going then one option is to use absolute positioning to move the text over the video.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.