Audio and video exercise:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
nav ul {
display: flex;
flex-direction: row;
}
nav ul li {
padding: 5px;
margin: 5px;
list-style: none;
}
.youtue-video{
display: flex;
flex-direction: row;
grid-template-rows: 2fr 1fr 4fr;
flex-wrap: wrap;
}
.youtue-video iframe{
width: 520px;
}
.video_item{
border: 2px solid black;
width: 520px;
/* position: absolute; */
width: 550px;
margin: 23px;
}
.audio{
display: flex;
flex-direction: row;
grid-template-rows: 2fr 1fr 4fr;
flex-wrap: wrap;
}
</style>
<body>
<div class="container">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="#youtube_video">YouTube Video</a></li>
<li><a href="#audi">Audio</a></li>
</ul>
</nav>
<div class="youtue-video" id="youtube_video">
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/vrQlEhmVFDA?si=2900REGgjfIPJU5V"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/aqvDTCpNRek?si=3ACPrxplbNVn2InC"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/MoeQlmeJnPg?si=oIMrKtOK95UK0c8C"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/MoeQlmeJnPg?si=oIMrKtOK95UK0c8C"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/MoeQlmeJnPg?si=oIMrKtOK95UK0c8C"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="video_item">
<iframe width="1200" height="315" src="https://www.youtube.com/embed/MoeQlmeJnPg?si=oIMrKtOK95UK0c8C"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
<div class="audio" id="audio">
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
<div class="audio-item">
<audio src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" controls></audio>
</div>
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.