This code goes in the Page HTML code (HEAD)
<style>
#myVideo-Scroll {
display: none;
position: fixed;
left: 0;
top: 0;
min-width: 100%;
height:auto;
margin-left: 50vw;
transform: translate(-50%);
}
@media screen and (min-width: 960px) {
#myVideo-Scroll { display: block;
z-index: -1;
}
</style>
<video autoplay muted loop playsinline id="myVideo-Scroll">
<source src="https://initiostar.co.uk/assets/beach.mp4" type="video/mp4">
</video>
The contents on this page, background and text have a parallax scroll effect.
As with the Fixed Full Screen video, the @media has been used to prevent this the video (with this style) appearing on the mobile version.
The latter has a simple video tag that scrolls with other content.
Fill Browser Video Scroll
