Я хочу сделать простую видео галерею. Как воспроизвести видео в div при выборе видео из списка видео?
Я не знаю, как это сделать, пожалуйста, помогите.
video {
width: 100%;
height: auto;
}
ul li {
text-transform: uppercase;
list-style: none;
text-decoration: none;
padding: 5px;
}
ul li:hover {
color: #51d0de;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="display: flex;flex-direction: row;">
<div style="width: 30%;height: 100%;">
<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>
</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>
Я хочу динамически отображать видео из списка видео на основе выбора пользователя.