How to place a Youtube video on top of a background image

Projects Personal Projects
1

I’m trying to create a replicate of a restaurant’s home page for a personal project practice.
The restaurant’s website has a Youtube video on top of a background image.
I’ve tried different HTML and CSS structures and struggling to get it to work.

Without reviewing my code, is there a general rule or practice in HTML and CSS on how to place a video on top of a background image as such in the attached screenshot?

Thanks,

2

Youtube Video on Background Image
Youtube Video on Background Image1853×497 98.9 KB

3

That looks to be a sectioning element that contains a <video></video> element.

section {
    width: 100%;
    height: 400px;
    background: url(skins/bgrd.png) cover;
}
video {
    margin: 40px auto;
}
4

Thanks for the reply MTF.
Below is my code. I tried that, perhaps incorrectly. Would you be able to review my code to see if that works on your end? I wasn’t able to get the video on top of the background image. Thanks :slight_smile:

5

section {
width: 100%;
height: 400px;
background: url(Images/VerticalShiplap.jpg) cover;
}
video {
margin: 40px auto;
}

VerticalShipLap
6
VerticalShipLap
7

To embed youtube videos use an iframe. Its different to the normal way that you would us the

Here is an example that places a youtube video over a element that has a background image.

<section>
  <iframe src="https://www.youtube.com/embed/D0UnqGm_miA" title="Dummy Video For Website" />
</section>

* {
  box-style: border-box; 
  margin: 0;
}

section {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  background: center/cover no-repeat url(https://e0.pxfuel.com/wallpapers/65/220/desktop-wallpaper-nasa-nasa-space.jpg);
}

iframe {
  width: 50%;
  background-color: black;
  aspect-ratio: 16 / 9;
  margin: auto;
  border: none;
}

Finally here is a codepen of it in action: https://codepen.io/Zakalvve-the-vuer/pen/ZEVJjpj

1 Like
8

That worked. Thank you very much