Today I am going to show you how to make a youtube video player using html and css.
After that, the folder and html file we made, we will upload into hosting server ( in web directory).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Video Player</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.mainVideo {
margin: 10px 0;
border: 2px solid #4CAF50;
padding: 10px;
border-radius: 10px;
background-color: #fff;
display: inline-block;
width: 100%;
max-width: 750px;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
color: #ffff00;
}
.active {
background-color: #ff9800;
}
</style>
</head>
<body>
<h3>প্রাথমিক স্তরের জন্যে কিছু নির্বাচিত ভিডিও</h3>
<div class="list">
<button class="listVideo" name="https://www.youtube.com/embed/P1OFo5eA2P4?si=vvAFci5eCFjujSvw">
<div class ="text"> ক এ কলা খ এ খাই</div>
</button>
<button class="listVideo" name="https://www.youtube.com/embed/o88S-QcORfQ?si=TpRFuG6W_AZYyUc9">
<div class ="text"> খোকা গেল মাছ ধরতে</div>
</button>
<button class="listVideo" name="https://www.youtube.com/embed/BFc40euGwpY?si=R2K5wDcF7C3RlWrH">
<div class ="text"> আমরা সবাই রাজা </div>
</button>
<button class="listVideo" name="https://www.youtube.com/embed/p7qBGtKesfw?si=bm1HmNbDFb9WkS17">
<div class ="text"> প্রজাপতি প্রজাপতি </div>
</button>
<button class="listVideo" name="https://www.youtube.com/embed/wLQdt8i0wcY?si=euiOPFEnfHbljT_2">
<div class ="text"> আমাদের দেশটা স্বপ্নপুরী</div>
</button>
</div>
<br><br>
<iframe class="mainVideo" width="750" height="450" src="https://www.youtube.com/embed/4UZEZ6BUc1w?si=tLV5IpmSvI-5eJ_W" title="YouTube video player"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
let listV = document.querySelectorAll(".listVideo");
let mainVideo = document.querySelector(".mainVideo");
listV.forEach(button => {
button.addEventListener("click", function () {
let videoSrc = button.getAttribute("name");
// Add autoplay dynamically
mainVideo.src = `${videoSrc}&autoplay=1`;
});
});
</script>
</body>
</html>