<!-- 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);
}