0

Ever since the property "background-attachment: fixed" has been introduced, we've been able to put several fixed backgrounds at different places of the same page, which gives really cool effects.

However, as far as I know, video backgrounds don't have this wonderful property, and instead rely on the old school "position: fixed" in order to be fixed relative to the screen. But I can't have two full-screen "position: fixed" elements on the same page, can I? Whoever's z-index is higher, will be the only one visible.

Is there any way to overcome this? (Maybe jquery solution, if CSS doesn't allow it?)

Here is my HTML:

<video autoplay muted loop id="video_1">
  <source src="video-1.mp4" type="video/mp4">
</video>

<div class="textbox">
  Here's some content
</div>

<video autoplay muted loop id="video_2">
  <source src="video-2.mp4" type="video/mp4">
</video>

and the CSS:

video {
  position: fixed;
  right: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}

Thank you so much.

Ben Viatte
  • 485
  • 1
  • 5
  • 16

0 Answers0