How to Make YouTube Video Player | JavaScript Small Project
Please subscribe our channel and support me.
Please like and 1 comment this video.
If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : https://www.youtube.com
Html Code
<h1 class="title">Youtube Video Player</h1>
<div class="container">
<div class="video-prev">
<iframe src="" frameborder="0" class="yt-video"></iframe>
</div>
<div class="all-video">
<div class="group"></div>
</div>
</div>
Css Code
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: sans-serif;
background-color: #f0f0f0;
}
img{
height: 100%;
width: 100%;
}
.container{
display: flex;
align-items: center;
margin-top: 40px;
max-width: 880px;
height: 400px;
background: #fff;
box-shadow: 4px 10px 10px #0006;
overflow: hidden;
}
.all-video{
height: -webkit-fill-available;
width: 200px;
margin: 10px 10px 10px 0;
}
.group{
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100%;
}
.group .list{
margin-bottom: 10px;
cursor: pointer;
}
.video-prev{
height: 100%;
width: 720px;
}
.video-prev iframe{
width: -webkit-fill-available;
height: -webkit-fill-available;
background-color: #f0f0f0;
border: none;
outline: none;
margin: 10px;
}
Js Code
var youtubeLink = "https://www.youtube.com/embed/";
// Video Id Group
var Video = [
"OBYaDB5Diho",
"e5YeRzKUjRU",
"eOdTmSV3R9M",
"2aw36EwM8oM",
"EV-IPDY5HKY",
"e5YeRzKUjRU",
"eOdTmSV3R9M",
"OBYaDB5Diho",
"iGanJjOnjD8",
"5MYk21zyKjY",
"PK-0GpAyDg8",
"ex-hteEUIAk",
"SKFKLgGpnwo",
];
for (const id of Video) {
var list = document.createElement('div');
list.classList.add("list");
list.innerHTML = `<img src="http://i.ytimg.com/vi/${id}/maxresdefault.jpg" alt="">`;
document.querySelector('.group').append(list);
list.addEventListener('click', function () {
document.querySelector(".yt-video").src = youtubeLink + id;
});
}
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use .
Thanks..
Copyright © 2021-2023 | WsCoder | All Right Reserved
