Adding an autoplay video that plays when a user scrolls can enhance engagement and create a more interactive web experience.
In this tutorial, we’ll build a play video on scroll feature using HTML, CSS, and JavaScript.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Why Use an Autoplay Video on Scroll?
Autoplay videos help grab users’ attention and can be useful for:
- Showcasing product demos
- Enhancing storytelling on websites
- Making websites more interactive
- Improving user engagement without requiring manual play
Now, let’s dive into the step-by-step guide.
Set Up Your Project Folder
Create a folder on your computer and add the following files inside it:
- index.html
- style.css
- script.js
Source Code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Build an Autoplay Video on Scroll Using HTML CSS & JS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
JavaScript Code
< // JavaScript Code >
How It Works
- The script listens for scroll and resize events.
- It checks if video is within the viewport.
- If a video is visible, it plays automatically.
- If a video goes out of view, it pauses.
Enhancing User Experience
To further improve usability, you can add:
- Lazy Loading: Load the video only when it enters the viewport.
- Custom Controls: Allow users to pause/play manually.
- Smooth Transitions: Fade effects when the video starts/stops.
Testing Your Feature
To test the functionality:
- Open the HTML file in a browser.
- Scroll down and check if the video plays when in view.
- Scroll back up and see if it pauses.
You May Also Like – How to Create an M3U8 Player Using HTML CSS & JavaScript
Conclusion
You’ve successfully created a play video on scroll. This feature can greatly enhance your website’s interactivity and engagement. Try experimenting with it and styles to suit your design.
Let me know if you need further improvements or customizations! 🚀
19 people bought this
Grab it Now for Just 20
