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.