Flowplayer Demo
Background video
Play video behind the other elements.
<div class="background-player-wrapper">
<div id="player" class="background-player"></div>
<p>This is content.</p>
<p>On top of the player.</p>
<p>The player is hidden under other content and cannot be accessed.</p>
</div>
body {
min-height: 56.25vw;
font-family: Roboto, "Helvetica Neue";
}
.background-player-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.background-player-wrapper p {
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
text-align: center;
padding: 1em;
margin-top: 4em;
}
.background-player {
position: absolute;
width: 100%;
z-index: -1;
top: 0;
left: 0;
}
.background-player .fp-ui {
display: none;
}
flowplayer("#player", {
src: "56058953-2cbd-4858-a915-1253bf7ef7b2/eedf1500-78f9-4249-977a-974445a09db3",
autoplay: true,
loop: true,
muted: true
})
