Video Slideshow using HTML CSS and Javascript

byCodingFlicks -September 23, 2021

0

Hello friends, in this blog, I will share another interesting snippet on video slideshow HTML CSS. Here I am going to create a Video Slideshow using HTML, CSS and, Javascript. I have shared many projects on CSS animation examples, HTML CSS, javascript, bootstrap, etc on codingflicks blog. if you have time, please check those interesting projects with source code apart from this snippet. The video below is the demo of how the video slider will look like at the end of coding.

I hope you have watched the video demo. We usually see image sliders on most websites. We also can create a video slider or slideshow as well using HTML CSS and javascript code. This snippet is an example of that. We see lots of slideshow video maker plugins around on the web. Here we will learn How to make a slideshow video with custom HTML CSS and javascript code.

You May Like this:

Video Slideshow using HTML CSS and Javascript [ Source Code ]:

To make this project, create two files. One is an HTML file and, the other is a CSS file. Now, link the external CSS with the HTML file. You can create a separate js file and link it with the HTML file. In this snippet, I put the script at the bottom of the HTML. I have used pexels video for this project. You can go to the website and download the video of your choice and add it to your project.

HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Video Slideshow using HTML CSS and Javascript</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<video autoplay="" class="box1" id="box1" src="4.mp4"></video> 
		<video autoplay="" class="box2" id="box2" src="5.mp4"></video> 
		<video autoplay="" class="box3" id="box3" src="6.mp4"></video>
	</div>
	<script>
	   
	   
	       var box1 = document.getElementById('box1');
	       var box2 = document.getElementById('box2');
	       var box3 = document.getElementById('box3');
	   
	       box1.onended = function () {
	           box2.play();
	           box1.style.opacity=0;
	           box2.style.opacity=1;
	       }
	       box2.onended = function () {
	           box3.play();
	           box2.style.opacity=0;
	           box3.style.opacity=1;
	       }
	       box3.onended = function () {
	           box1.play();
	           box3.style.opacity=0;
	           box1.style.opacity=1;
	       }
	   
	</script>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}
video {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	transition: all 150ms linear;
	z-index: 10;
}
.box1 {
	opacity: 1;
}
.box2 {
	opacity: 0;
}
.box3 {
	opacity: 0;
}
.container {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
}

I hope you have successfully created the project using the source code. If you liked the snippet, then please follow us on our social media profiles to stay connected with the blog. Also, please share the articles of this blog among your friends and relative, if they need. Thank you for visiting the blog.

Please do not enter any spam link in the comment box.