YouTube Clone Using HTML CSS || split status
YouTube Clone Using HTML CSS
Output -
HTML Code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube</title>
<!-- CSS linking -->
<link rel="stylesheet" href="style.css">
<!-- CSS Linking -->
<!-- Font-awesome linking -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Font-awesome linking -->
<!-- Box-icon Linking -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- Box-icon Linking -->
<!-- Linking Google-Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
<!-- Linking Google-Fonts -->
</head>
<body>
<header class="header">
<!-- Left header -->
<div class="left-header">
<div class="menu">
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo">
<a href="index.html"><i class="fa-brands fa-youtube"></i><span>YouTube</span><sup>IN</sup></a>
</div>
</div>
<!-- Center header -->
<div class="center-header">
<div class="search-input">
<input type="text" placeholder="Search">
</div>
<form action="index.html" method="get" class="search-bar">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</form>
<div class="microphone">
<i class="fa-solid fa-microphone"></i>
</div>
</div>
<!-- center header -->
<!-- right header -->
<div class="right-header">
<div class="upload-video">
<i class='bx bx-video-plus'></i>
</div>
<div class="notification">
<i class="fa-regular fa-bell"><sup>9+</sup></i>
</div>
<div class="profile">
<i class="fa-regular fa-user"></i>
</div>
</div>
</header>
<div class="category">
<div class="container">
<div id="items"><a href="#all">ALL</a></div>
<div id="items"><a href="#music">Music</a></div>
<div id="items"><a href="#mixes">Mixes</a></div>
<div id="items"><a href="#website">Website</a></div>
<div id="items"><a href="#">Application_software</a></div>
<div id="items"><a href="#">Gaming</a></div>
<div id="items"><a href="#">Sahil_Haryanvi</a></div>
<div id="items"><a href="#">Game_shows</a></div>
<div id="items"><a href="#">Reverberation</a></div>
<div id="items"><a href="#">HTML</a></div>
<div id="items"><a href="#">Editing</a></div>
<div id="items"><a href="#">Lo_fi</a></div>
<div id="items"><a href="#">Live</a></div>
<div id="items"><a href="#">Indian_Pop_music</a></div>
<div id="items"><a href="#">T_Series</a></div>
<div id="items"><a href="#">Lectures</a></div>
<div id="items"><a href="#">Game_shows</a></div>
<div id="items"><a href="#">Vocal_Music</a></div>
<div id="items"><a href="#">Gadgets</a></div>
<div id="items"><a href="#">Recently_uploaded</a></div>
<div id="items"><a href="#">Watched</a></div>
<div id="items"><a href="#">New_to_you</a></div>
</div>
</div>
<!-- Main Content -->
<section class="main">
<div id="all">All <hr>
<iframe src="https://www.youtube.com/embed/9trhuOryOrU?si=DBPlPzeCMeaarv4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/BO04oeZ6wQQ?si=pGQ2GYklP8DV9Ips" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/70lregSisnw?si=6u7CKhxo4X2ZB6y1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/_SBLxwqgXxE?si=F8C0Tp0LKBodEGGW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/w8M0tQQUo_A?si=MncNyEt3I2NLFchK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/TJAnVIBI3RE?si=Ex2yctZVOUgG8vHJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5bfosjAeeLY?si=ATzXNDZK15Ij0rTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/atUWKBW00YA?si=Xcmh8NcyCHw58N_o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/vw7mFNsVeY8?si=jqgZgnAyG9oHroB-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/u3fHmXKFpRc?si=qNVx_Bk6gXjwbpgD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/gLHeCvNogkk?si=wYc_YteEK3_EuCNX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/Xop8dNgoGfU?si=4eLmDFIPj8wnEWtM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/oD155zWANQg?si=SEhzJeJ4wyYWFq8d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/ZwqFFbdL69s?si=M1bLWr7gjgK_EuY1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/yqqphr4S-i0?si=s3Urd4wcyHjKWIYF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/lYkvVf-ChfA?si=js6ohGDY8AT53abB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/hroirymskWU?si=eg_Y9eVpc43nir44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/skOrAg0IIJs?si=Ve36HXaP9U6Hb65q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/wm-ohPOTRD4?si=5F7avyPvGQQ9x9HA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/jlyN-3OGTCg?si=vw6dDBRaujF1M-Du" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/EaLCU5GVm6o?si=fFfAMk6bqCcW7DRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/slcl6ji7vCk?si=eR91u7WjgUsuZ8Fw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Music category-->
<div id="music">music <hr>
<iframe src="https://www.youtube.com/embed/9trhuOryOrU?si=DBPlPzeCMeaarv4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/BO04oeZ6wQQ?si=pGQ2GYklP8DV9Ips" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/70lregSisnw?si=6u7CKhxo4X2ZB6y1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/_SBLxwqgXxE?si=F8C0Tp0LKBodEGGW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/w8M0tQQUo_A?si=MncNyEt3I2NLFchK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/TJAnVIBI3RE?si=Ex2yctZVOUgG8vHJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5bfosjAeeLY?si=ATzXNDZK15Ij0rTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/atUWKBW00YA?si=Xcmh8NcyCHw58N_o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/vw7mFNsVeY8?si=jqgZgnAyG9oHroB-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/u3fHmXKFpRc?si=qNVx_Bk6gXjwbpgD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/gLHeCvNogkk?si=wYc_YteEK3_EuCNX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/Xop8dNgoGfU?si=4eLmDFIPj8wnEWtM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/oD155zWANQg?si=SEhzJeJ4wyYWFq8d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/ZwqFFbdL69s?si=M1bLWr7gjgK_EuY1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/yqqphr4S-i0?si=s3Urd4wcyHjKWIYF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/lYkvVf-ChfA?si=js6ohGDY8AT53abB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/hroirymskWU?si=eg_Y9eVpc43nir44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/skOrAg0IIJs?si=Ve36HXaP9U6Hb65q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/wm-ohPOTRD4?si=5F7avyPvGQQ9x9HA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/jlyN-3OGTCg?si=vw6dDBRaujF1M-Du" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/EaLCU5GVm6o?si=fFfAMk6bqCcW7DRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/slcl6ji7vCk?si=eR91u7WjgUsuZ8Fw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div id="mixes">Mixes <hr>
<iframe src="https://www.youtube.com/embed/9trhuOryOrU?si=DBPlPzeCMeaarv4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/BO04oeZ6wQQ?si=pGQ2GYklP8DV9Ips" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/70lregSisnw?si=6u7CKhxo4X2ZB6y1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/_SBLxwqgXxE?si=F8C0Tp0LKBodEGGW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/w8M0tQQUo_A?si=MncNyEt3I2NLFchK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/TJAnVIBI3RE?si=Ex2yctZVOUgG8vHJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5bfosjAeeLY?si=ATzXNDZK15Ij0rTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/atUWKBW00YA?si=Xcmh8NcyCHw58N_o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/vw7mFNsVeY8?si=jqgZgnAyG9oHroB-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/u3fHmXKFpRc?si=qNVx_Bk6gXjwbpgD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/gLHeCvNogkk?si=wYc_YteEK3_EuCNX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/Xop8dNgoGfU?si=4eLmDFIPj8wnEWtM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/oD155zWANQg?si=SEhzJeJ4wyYWFq8d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/ZwqFFbdL69s?si=M1bLWr7gjgK_EuY1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/yqqphr4S-i0?si=s3Urd4wcyHjKWIYF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/lYkvVf-ChfA?si=js6ohGDY8AT53abB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/hroirymskWU?si=eg_Y9eVpc43nir44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/skOrAg0IIJs?si=Ve36HXaP9U6Hb65q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/wm-ohPOTRD4?si=5F7avyPvGQQ9x9HA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/jlyN-3OGTCg?si=vw6dDBRaujF1M-Du" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/EaLCU5GVm6o?si=fFfAMk6bqCcW7DRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/slcl6ji7vCk?si=eR91u7WjgUsuZ8Fw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Music category-->
<div id="website">Website <hr>
<iframe src="https://www.youtube.com/embed/9trhuOryOrU?si=DBPlPzeCMeaarv4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/BO04oeZ6wQQ?si=pGQ2GYklP8DV9Ips" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/70lregSisnw?si=6u7CKhxo4X2ZB6y1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/_SBLxwqgXxE?si=F8C0Tp0LKBodEGGW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/w8M0tQQUo_A?si=MncNyEt3I2NLFchK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/TJAnVIBI3RE?si=Ex2yctZVOUgG8vHJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5bfosjAeeLY?si=ATzXNDZK15Ij0rTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/atUWKBW00YA?si=Xcmh8NcyCHw58N_o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/vw7mFNsVeY8?si=jqgZgnAyG9oHroB-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/u3fHmXKFpRc?si=qNVx_Bk6gXjwbpgD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/gLHeCvNogkk?si=wYc_YteEK3_EuCNX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/Xop8dNgoGfU?si=4eLmDFIPj8wnEWtM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/oD155zWANQg?si=SEhzJeJ4wyYWFq8d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/ZwqFFbdL69s?si=M1bLWr7gjgK_EuY1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/yqqphr4S-i0?si=s3Urd4wcyHjKWIYF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/5udzZFGpre0?si=V2x8c1MW05FqxRVT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/lYkvVf-ChfA?si=js6ohGDY8AT53abB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/hroirymskWU?si=eg_Y9eVpc43nir44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/skOrAg0IIJs?si=Ve36HXaP9U6Hb65q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/wm-ohPOTRD4?si=5F7avyPvGQQ9x9HA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/jlyN-3OGTCg?si=vw6dDBRaujF1M-Du" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/EaLCU5GVm6o?si=fFfAMk6bqCcW7DRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/slcl6ji7vCk?si=eR91u7WjgUsuZ8Fw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</main>
</body>
</html>
CSS Code -
*{
font-family: sans-serif, Arial;
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
.header{
display: flex;
justify-content: space-evenly;
padding-inline-start: 10px;
padding-inline-end: 30px;
padding-block: 5px;
align-items: center;
text-align: center;
/* background-color: rgb(155, 153, 153); */
}
/* left herder starts here! */
.left-header{
display: flex;
}
.left-header .menu{
padding: 10px;
margin-inline-start: 10px;
}
.left-header .menu i{
cursor: pointer;
font-size: 25px;
}
.left-header .menu:hover{
background-color: rgb(230, 229, 229);
border-radius: 100px;
transition: width 2s, height 4s;
}
.left-header .logo{
margin-inline-start: 20px;
padding: 10px;
}
.left-header .logo a{
text-decoration: none;
color: black;
}
.left-header .logo i{
color: red;
font-size: 25px;
}
.left-header .logo span{
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
font-size: 25px;
}
.left-header .logo sup{
color: rgb(80, 80, 80);
font-size: 10px;
padding: 5px;
margin-top: 10px;
}
/* left header ends */
/* Center header starts here! */
.center-header{
display: flex;
position: relative;
width: 50%;
}
/* .search-input{
} */
.search-input input{
width: 30rem;
padding: 13px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border: 1px solid rgb(189, 187, 187);
box-shadow: 0px 0px 1px inset rgb(231, 231, 231);
}
.search-icon{
padding: 10px;
background-color: rgb(230, 224, 224);
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
border: 1px solid rgb(231, 231, 231);
}
.search-icon i{
padding: 1px;
}
.microphone{
margin-left: 7px;
position: relative;
cursor: pointer;
}
.microphone i{
font-size: larger;
background-color: rgb(231, 231, 231);
border-radius: 100px;
padding: 10px;
}
/* Center header ends here! */
/* Right header starts here */
.right-header{
display: flex;
padding: 10px;
}
.upload-video{
padding-inline-end: 10px;
cursor: pointer;
font-size: 20px;
}
.upload-video i{
padding: 10px;
border-radius: 100px;
}
.upload-video i:hover{
background-color: rgb(241, 240, 240);
border-radius: 100px;
},
.notification{
padding-inline-end: 10px;
cursor: pointer;
font-size: 20px;
}
.notification i{
padding: 10px;
border-radius: 100px;
}
.notification i:hover{
background-color: rgb(241, 240, 240);
border-radius: 100px;
}
.profile{
padding-inline-end: 10px;
cursor: pointer;
font-size: 20px;
}
.profile i{
padding: 10px;
border-radius: 100px;
}
.profile i:hover{
background-color: rgb(241, 240, 240);
border-radius: 100px;
}
/* Right header ends here! */
/* Main header ends here! */
/*Category starts here! */
.category{
padding: 10px;
}
.category .container{
padding: 10px;
display: flex;
overflow: auto;
}
.category .container::-webkit-scrollbar{
display: none;
}
.category .container #items{
padding: 0px 3px;
}
.category .container #items a{
text-decoration: none;
color: black;
cursor: pointer;
background-color: rgb(238, 238, 238);
border-radius: 20px;
padding: 10px;
font-size: 15px;
font-weight: lighter;
}
.category .container #items .index{
background-color: black;
color: #fff;
}
/* Main content starts here! */
.main{
padding: 10px 20px;
}
.main #all{
padding: 10px;
}
.main #all iframe{
border-radius: 10px;
padding-top: 5px;
}
.main #music{
padding: 20px;
}
.main #music iframe{
border-radius: 10px;
padding-top: 5px;
}
.main #mixes{
padding: 10px;
}
.main #mixes iframe{
border-radius: 10px;
padding-top: 5px;
}
.main #website{
padding: 20px;
}
.main #website iframe{
border-radius: 10px;
padding-top: 5px;
}
Topics covered in this blog-
- HTML YouTube clone
- CSS video sharing website
- Video platform with HTML and CSS
- YouTube replica using HTML/CSS
- HTML5 video hosting site
- CSS video player template
- YouTube clone code
- Customizable video sharing HTML CSS
- Responsive YouTube clone
- HTML CSS video streaming
- Video sharing website design
- YouTube-like site HTML CSS
- HTML CSS video gallery
- YouTube clone script HTML CSS
- Video upload website HTML CSS
- HTML5 video hosting script
- CSS-based video community
- YouTube alternative HTML CSS
- HTML CSS video player code
- HTML CSS multimedia sharing
Post a Comment