Playing videos when scrolling on website pages is a trend right now, many modern websites apply it on their websites, we see this a lot on parallax websites.

It’s interesting to see the changes that are happening to the current website, the website is currently rich in features, many things can be applied to the website, effects are increasingly being used.

Related article:

Making Youtube Videos as Website Background
Tutorial to Change Background Color When Scrolling
Parallax Website With The Coolest Scroll Effect
On this occasion, tutorial-webdesign.com will explain a little about how to create a feature that is usually found on parallax websites, which will play the background video only when the mouse is scrolled.

scroll to play video

HTML Structure
As usual, we start by creating the HTML structure, it’s simple, we only need two tags in this tutorial which must be placed in the body tag, of course, for more serious website implementation, more tags can be used, because this is only for demo. we make it very simple.

Scroll to play video

CSS
Next we need CSS to make the text centered, and make the body height to 4000px, while the video is made in a fixed position and gives a cover value to the background-size so that it fills the screen and doesn’t change position when scrolled.