I want to make a simple video gallery. How to play a video in a div on selecting a video from a list of videos?
I don't know how to do this please help.
<!DOCTYPE html>
<html>
<head>
`<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
ul li{
text-transform: uppercase;
list-style: none;
text-decoration: none;
padding:5px;
}
ul li:hover{
color: #51d0de;
}
</style>
</head>
<body>
<div style="display: flex;flex-direction: row;">
<div style="width: 30%;height: 100%;">
<p>
<h3>SELECT A VIDEO</h3>
<ul>
<li>Video 1</li>
<li>Video 2</li>
<li>Video 3</li>
<li>Video 4</li>
<li>Video 5</li>
<li>Video 6</li>
<li>Video 7</li>
</ul>
</p>
</div>
<div style="width: 90%;height: 100%;">
<div><h1>Name of Video</h1></div>
<div style="width: 100%;">
<video width="100%" height="auto" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
</body>
</html>
I want dynamically display a video from a list of videos based on user's choice.