thumbnail

Youtube Home Page Clone Using HTML and CSS

Introduction :

This project is a clone of the YouTube home page, created using HTML and CSS to closely replicate the layout, design, and some interactive features of the actual YouTube home page. The purpose of this project is to demonstrate skills in web development by recreating a complex and familiar interface. This includes the header, sidebar, main content area, and footer with responsive design to adapt to various screen sizes.

This project involves creating a clone of the YouTube home page, a widely recognized and highly trafficked website, using HTML and CSS. The goal is to replicate the layout, design, and some of the interactive elements of the YouTube home page as closely as possible. This exercise in web development serves to demonstrate proficiency in front-end technologies and to understand the intricacies of designing complex user interfaces.

The primary objective of this project is to understand and apply modern web design techniques to recreate a sophisticated web page. By building a YouTube home page clone, the project aims to achieve the following:

  1. Replicate the Layout and Structure:

    • Create a layout that mirrors the YouTube home page, including the header, sidebar, main content area, and footer.
    • Ensure the page structure is semantically correct and accessible.

  2. Responsive Design:

    • Implement responsive design principles to ensure the clone functions well on a variety of devices, from desktop monitors to mobile phones.
    • Use CSS media queries and flexible grid/flexbox layouts to adapt the design to different screen sizes.

  3. Visual Design:

    • Match the visual design elements, including colors, fonts, and spacing, to closely resemble the original YouTube interface.
    • Use CSS to style various elements such as the header, sidebar, and video thumbnails.

  4. User Interaction:

    • Prepare the layout to handle potential JavaScript enhancements for interactive elements like the search bar, sidebar toggle, and video hover effects.
    • While the current project focuses on HTML and CSS, it sets the groundwork for future JavaScript integration.

Importance of the Project

Creating a clone of a well-known website like YouTube is a valuable exercise for several reasons:

  1. Understanding Complex Layouts:

    • Reproducing a complex layout helps in understanding how different components fit together and how to manage them using HTML and CSS.
    • This includes learning about positioning, floating elements, and layering content with z-index.

  2. Improving CSS Skills:

    • Working on detailed CSS styling improves knowledge of CSS properties and selectors.
    • It also involves advanced techniques like CSS grid, flexbox, and responsive design strategies

Explanation :

HTML Structure

The HTML file is structured into several sections:

  1. Head Section:

    • Title and Meta Tags: Sets the title of the page to “YouTube” and includes meta tags for viewport settings to ensure responsiveness.
    • CSS and Icon Links: Links to the external CSS file (style.css) and icon library (iconify), and sets a favicon.

  2. Body Section:

    • Header:
      • Contains the logo, search bar, and user interaction buttons.
      • Uses flexbox for layout.
    • Sidebar:
      • Contains navigation links similar to YouTube’s sidebar.
      • Divided into categories such as “Home”, “Explore”, “Subscriptions”, and more.
    • Main Content:
      • Represents the video feed area where video thumbnails and details are displayed.
    • Bottom Navigation:
      • A responsive footer navigation bar for smaller screens.

CSS Styling

The CSS is organized into several key parts:

  1. Scrollbar Styling:

    • Customizes the appearance of the scrollbar to match the overall theme.

  2. Body and General Styles:

    • Sets base styles for the body and ensures the page does not overflow horizontally.
    • Defines fonts and basic layout properties.

  3. Header Styles:

    • Uses flexbox to align items within the header.
    • Styles the logo, search bar, and user buttons.

  4. Sidebar Styles:

    • Styles the sidebar, including the categories and their hover states.
    • Uses flexbox and fixed positioning to keep

SOURCE CODE:

HTML (index.html)

				
					<!DOCTYPE html>
<html>
<head>
	<title>YouTube</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="icon" type="image/icon" href="Resources/favicon_32x32.png" sizes="32x32"> <script type="litespeed/javascript" data-src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script> <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport"  />

</head>
<body>

	
	<header class = "header-container stick">
		<div class = "container">
			<div class = "guide-button-box">
				<span class="iconify hamburger" data-icon="ci:hamburger" data-inline="false"></span>
			</div>
			<div class = "logo">	
				<img class = "logo-img" src = "Resources/youtube_logo.webp">
				<span class = "country-code">IN</span>
			</div>
		</div>
		<div class = "search-container">
			<input type="text" placeholder="Search" name="search">
      		<button type="submit">
      			<span class="iconify search-btn" data-icon="ant-design:search-outlined" data-inline="false"></span>
      		</button>
		</div>
		<div class = "user-d">
			<button class = "user-btn">
				<span class="iconify" data-icon="bx:bxs-video-plus" data-inline="false"></span>
			</button>
			<button class = "user-btn">
				<span class="iconify" data-icon="gg:menu-grid-r" data-inline="false"></span>
			</button>
			<button class = "user-btn">
				<span class="iconify" data-icon="fa-solid:bell" data-inline="false"></span>
			</button>
			<button>
				<span class="iconify user" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
			</button>
		</div>
	</header>

	

	

		<div class = "sidebar">
			<div class = "sidebar-categories">
				<div class = "sidebar-category selected">
					<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
					<span>Home</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-explore" data-inline="false"></span>
					<span>Explore</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
					<span>Subscriptions</span>
				</div>
			</div>
			
			<hr/>

			<div class = "sidebar-categories">
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
					<span>Library</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-history" data-inline="false"></span>
					<span>History</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ant-design:play-square-outlined" data-inline="false"></span>
					<span>Your videos</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-watch-later" data-inline="false"></span>
					<span>Watch later</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="bx:bxs-like" data-inline="false"></span>
					<span>Liked videos</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:outline-expand-more" data-inline="false"></span>
					<span>Show more</span>
				</div>
			</div>

			<hr/>

			<div class = "subscription-categories">
				<span class = "head-text">
					SUBSCRIPTIONS
				</span>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 1</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 2</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 3</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 4</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 5</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 6</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
					<span>Channel 7</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify" data-icon="ic:outline-expand-more" data-inline="false"></span>
					<span>Show 40 more</span>
				</div>
			</div>

			<hr/>

			<div class = "subscription-categories">
				<span class = "head-text">
					MORE FROM YOUTUBE
				</span>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ant-design:youtube-filled" data-inline="false"></span>
					<span>YouTube Premium</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:sharp-local-movies" data-inline="false"></span>
					<span>Movies</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="simple-icons:youtubegaming" data-inline="false"></span>
					<span>Gaming</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="fluent:live-24-filled" data-inline="false"></span>
					<span>Live</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="icon-park-outline:hanger-two" data-inline="false"></span>
					<span>Fashion & Beauty</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ant-design:bulb-filled" data-inline="false"></span>
					<span>Learing</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="icomoon-free:trophy" data-inline="false"></span>
					<span>Sports</span>
				</div>
			</div>

			<hr/>

			<div class = "sidebar-categories">
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="fluent:settings-28-filled" data-inline="false"></span>
					<span>Settings</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ci:flag-fill" data-inline="false"></span>
					<span>Report history</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ci:help-circle" data-inline="false"></span>				
					<span>Help</span>
				</div>
				<div class = "sidebar-category">
					<span class="iconify user-icon" data-icon="ic:baseline-feedback" data-inline="false"></span>
					<span>Send Feedback</span>
				</div>
			</div>

			<hr/>

			<div class = "sidebar-bottom-info">
				<a href="/">About</a>
				<a href="/">Press</a>
				<a href="/">Copyright</a><br>
				<a href="/">Contact us</a>
				<a href="/">Creators</a><br>
				<a href="/">Advertise</a>
				<a href="/">Developers</a><br><br>
				<a href="/">Terms</a>
				<a href="/">Privacy</a>
				<a href="/">Policy & Safety</a><br>
				<a href="/">How YouTube works</a><br>
				<a href="/">Test new features</a><br><br>
				<span>© 2021 Google LLC</span>
			</div>

			<div class = "sidebar-category-sml">
				<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
				<span>Home</span>
			</div>
			<div class = "sidebar-category-sml">
				<span class="iconify user-icon" data-icon="ic:baseline-explore" data-inline="false"></span>
				<span>Explore</span>
			</div>
			<div class = "sidebar-category-sml">
				<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
				<span>Subscriptions</span>
			</div>
			<div class = "sidebar-category-sml">
				<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
				<span>Library</span>
			</div>
		</div>

	

	

	<div class = "header-navbar">
		<button class = "navbar-element first active">
			All
		</button>
		<button class = "navbar-element">
			Music
		</button>
		<button class = "navbar-element">
			Wildlife
		</button>
		<button class = "navbar-element">
			Education
		</button>
		<button class = "navbar-element">
			Recently Uploaded
		</button>
		<button class = "navbar-element">
			Live
		</button>
		<button class = "navbar-element">
			Tamil
		</button>
		<button class = "navbar-element">
			T-Series
		</button>
		<button class = "navbar-element">
			Cricket
		</button>
		<button class = "navbar-element">
			Sports
		</button>
		<button class = "navbar-element">
			Eating
		</button>
		<button class = "navbar-element">
			Laughter
		</button>
		<button class = "navbar-element">
			Music
		</button>
		<button class = "navbar-element">
			Wildlife
		</button>
		<button class = "navbar-element">
			Education
		</button>
		<button class = "navbar-element">
			Recently Uploaded
		</button>
		<button class = "navbar-element">
			Live
		</button>
		<button class = "navbar-element">
			Tamil
		</button>
	</div>

	

	

	<div class = "btm-nav">
		<div>
			<button class = "btm-btn">
				<span class="iconify user-icon selected-img" data-icon="ci:home-alt-fill" data-inline="false"></span>
			</button>
			<span>Home</span>
		</div>	
		<div>
			<button class = "btm-btn">
				<span class="iconify user-icon" data-icon="ic:round-local-fire-department" data-inline="false"></span>
			</button>
			<span>Trending</span>
		</div>		
		<div>
			<button class = "btm-btn">
				<span class="iconify user-icon" data-icon="ic:baseline-subscriptions" data-inline="false"></span>
			</button>
			<span>Subscriptions</span>
		</div>		
		<div>
			<button class = "btm-btn">
				<span class="iconify user-icon" data-icon="ic:baseline-video-library" data-inline="false"></span>
			</button>
			<span>Library</span>
		</div>			
	</div>

	

	

	<div class = "main-content">
		<div class = "videos">
			<div class = "videos-container">
				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>

				<div class = "video">
					<div class = "video-thumbnail">
						<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NjciIGhlaWdodD0iNTUyIiB2aWV3Qm94PSIwIDAgNjY3IDU1MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="667" height="552" decoding="async" data-src="https://www.techsmith.com/blog/wp-content/uploads/2019/06/YouTube-Thumbnail-Sizes.png" alt = "" />
					</div>					

					<div class = "video-details">
						<div class = "author">
							<span class="iconify video-icon" data-icon="carbon:user-avatar-filled" data-inline="false"></span>
						</div>

						<div class = "title">
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
							<a href="">Channel 1</a>
							<span>10M views • 3 Months Ago</span>
						</div>
					</div>
				</div>				
			</div>
		</div>
	</div>

	 <script type="text/javascript" src = "script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://foolishdeveloper.com/wp-content/litespeed/js/e06f9a8e9f9b4d7bb2f81f2339980ae8.js?ver=8928e"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

CSS (style.css)

				
					/**********SCROLLBAR**********/

::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  
  ::-webkit-scrollbar-thumb {
    background: #606060; 
    border-radius: 10px;
    padding: 1px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #cccccc; 
  }
  
  ::-ms-scrollbar {
    width: 8px;
  }
  
  ::-ms-scrollbar-track {
    background: #f1f1f1; 
  }
  
  ::-ms-scrollbar-thumb {
    background: #606060; 
    border-radius: 10px;
    padding: 1px;
  }
  
  ::-ms-scrollbar-thumb:hover {
    background: #cccccc; 
  }
  
  ::-moz-scrollbar {
    width: 8px;
  }
  
  ::-moz-scrollbar-track {
    background: #f1f1f1; 
  }
  
  ::-moz-scrollbar-thumb {
    background: #606060; 
    border-radius: 10px;
    padding: 1px;
  }
  
  ::-moz-scrollbar-thumb:hover {
    background: #cccccc; 
  }
  
  
  body {
      margin: 0;
      padding: 0;
      scroll-padding-top: 56px;
      overflow: hidden;
      background-color: #fff;
  }
  
  
  /**********Header**********/
  
  .header-container {
      display: flex;
      justify-content: space-between;
      height: 56px;
      /*margin-right: 10px;*/
      overflow: hidden;
      background-color: #fff;
  }
  
  .container {
      display: flex;
  }
  
  .guide-button-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      width: 40px;
      padding: 8px 2px 8px 10px;
  }
  
  .hamburger {
      height: 24px;
      width: 24px;
  }
  
  .country-code {
      margin: 12px 10px 0 -10px;
      color: #606060;
      font-size: 10px;
      font-family: Roboto, Arial, sans-serif;
  }
  
  .logo {
      display: flex;
      height: 56px;
  }
  
  .logo-img {
      height: 56px;
  }
  
  .user-d {
      width: 225px;
  }
  
  .search-container {
    min-width: 40px;
    max-width: 728px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .search-container input {
      height: 26px;
    min-width: 0px;
    width: 526px;
    padding: 2px 6px;
    border: 1px solid #CCCCCC;
    color: #f8f8f8;
    font: 13px Roboto, Noto, sans-serif;
  }
  
  .search-container button {
      float: right;
      height: 32px;
      width: 65px;
      padding: 1px 6px;
      background: #f8f8f8;
    border: 1px solid #CCCCCC;
    border-left: 0px;
      cursor: pointer;
  }
  
  .search-container button:hover {
      background: #ccc;
  }
  
  .iconify {
      height: 24px;
      width: 24px;
      color: #606060;
  }
  
  .search-btn {
      height: 20px;
      width: 20px;
  }
  
  .user-d {
      display: flex;
      width: 225px;
      align-items: center;
      justify-content: space-evenly;
      padding-right: 16px;
  }
  
  .user-d button {
      height: 40px;
      width: 40px;
      border: none;
      background-color: #ffffff;
  }
  
  .user {
      height: 32px;
      width: 32px;
  }
  
  .stick {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    left: 0;
      width: 100%;
  }
  
  /**********SIDE BAR**********/
   
  .sidebar {
      height: 100%;
      width: 240px;
      background-color: #fff;
      position: -webkit-fixed;
      position: fixed;
      top: 56px;
    left: 0;
    overflow-y: hidden;
  }
  
  .sidebar:hover {
      overflow-y: scroll;
  }
  
  .sidebar-categories {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 12px 0;
  }
  
  .sidebar-category {
      display: flex;
      align-items: center;
      padding: 0px 24px;
      height: 40px;
    font: 14px Roboto, Noto, sans-serif;
    color: #606060;
  }
  
  .user-icon {
      height: 24px;
      width: 24px;
      padding: 0px 24px 0px 0px;
  }
  
  .sidebar-category:hover {
      background-color: #f2f2f2;
      cursor: pointer;
  }
  
  .selected {
      background-color: #e5e5e5;
      font-weight: 600;
  }
  
  .selected:hover {
      background-color: #d9d9d9;
  }
  
  .selected-img {
      color: #ff0000;
  }
  
  .sidebar-category:active {
      background-color: #d6d6d6;
  }
  
  .head-text {
      width: 100%;
      height: 33px;
      font: 14px Roboto, Noto, sans-serif;
      color: #606060;
      font-weight: bold;
      padding: 8px 24px;
  }
  
  hr {
      border-top: 0px solid #e5e5e5;
      width: 100%;
  }
  
  .sidebar-bottom-info {
      width: 100%;
      height: auto;
      padding: 16px 24px;
  }
  
  .sidebar-bottom-info a {
      margin-right: 8px;
      font: 13px Roboto, Noto, sans-serif;
    color: #606060;
      font-weight: bold;
      text-decoration: none;
  }
  
  .sidebar-bottom-info span {
      padding-bottom: 50px;
      font: 13px Roboto, Noto, sans-serif;
    color: #606060;
  }
  
  .sidebar-category-sml {
      height: 44px;
      width: 72px;
      font: 10px Roboto, Noto, sans-serif;
    color: #606060;
    padding-top: 16px;
    padding-bottom: 14px;
    display: grid;
    justify-items: center;
      align-items: center;
  }
  
  .sidebar-category-sml:hover {
      background-color: #f2f2f2;
      cursor: pointer;
  }
  
  /**********HEADER NAVBAR**********/
  
  .header-navbar {
      display: flex;
      width: 100%;
      height: 54px;
      position: -webkit-fixed;
      position: fixed;
      left: 240px;
      top: 56px;
    overflow: hidden;
       align-items: center;
       justify-content: flex-start;
       border-top: 1px solid #e5e5e5;
       border-bottom: 1px solid #e5e5e5;
  }
  
  .navbar-element {
      background-color: #f2f2f2;
      height: 32px;
      margin: 12px 12px 12px 0px;
      padding: 0px 12px;
      font: 14px Roboto, Arial, sans-serif;
      border: 1px solid #D9D9D9;
      border-radius: 20px;
      white-space: nowrap;
      cursor: pointer;
  }
  
  .first {
      margin: 12px 12px 12px 24px;
  }
  
  .active {
      background-color: #030303;
      color: #ffffff;
  }
  
  /**********BOTTOM NAVBAR**********/
  
  .btm-nav {
      height: 50px;
      width: 100%;
      /*padding-bottom: 10px;*/
      position: fixed;	
      bottom: 0;
      left: 0;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      overflow: none;
  }
  
  .btm-nav div {
      font: 11px Roboto Arial sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 100%;
  }
  
  .btm-btn {
      background-color: #fff;
      border: none;
  }
  
  /**********MAIN CONTENT**********/
  
  .main-content {
      margin: 24px 0px 0px 0px;
      position: -webkit-fixed;
      position: fixed;
      left: 240px;
      top: 88px;
      right: 0;
      width: auto;
      height: 100%;
      overflow-y: scroll;
  }
  
  .videos {
      background-color: #f9f9f9;
      padding: 15px 25px 50px 25px;
  }
  
  .videos-container {
      /*display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;*/
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      grid-column: span 4;
      justify-items: center;
      margin-top: 12px;
      padding-bottom: 100px;
      grid-row-gap: 10px;
  }
  
  .video {
      width: auto;
      height: auto;
      margin: 0 10px 30px 0;
      cursor: pointer;
  }
  
  .video-thumbnail {
      width: 100%;
      height: auto;
  }
  
  .video-thumbnail img {
      object-fit: cover;
      height: 100%;
      width: 100%;	
  }
  
  .video-icon {
      object-fit: cover;
      height: 36px;
      width: 36px;
      margin: 12px 12px 0 0;
  }
  
  .video-details {
      display: flex;
      margin-top: 10px;
      padding-right: 24px;
      font: 14px Roboto, Arial, sans-serif;
      color: rgb(96, 96, 96);
  }
  
  .title {
      display: flex;
      flex-direction: column;
  }
  
  .title h3 {
      color: rgb(3, 3, 3);
      line-height: 18px;
      margin-bottom: 6px;
      font-size: 16px;
  }
  
  .title a {
      text-decoration: none;
      color: rgb(96, 96, 96);
      font: inherit;
  }
  
  /**********RESPONSIVENESS CODE**********/
  
  @media (min-width: 1331px) {
      .sidebar-category-sml, .btm-nav {
          display: none;
      }
  }
  
  @media (max-width: 1330px) {
  
      .sidebar {
          height: 100%;
          width: 72px;
      }
  
      .sidebar:hover {
          overflow-y: hidden;
      }
  
      .sidebar-categories , .sidebar-bottom-info , .subscription-categories , hr, .btm-nav {
          display: none;
      }
  
      .header-navbar, .main-content {
          left: 72px;
      }
  
      .user-icon {
          padding: 0;
          margin-bottom: 6px;
      }
  
      .sidebar-category-sml {
          display: grid;
      }
  }
  
  @media (max-width: 807px) and (min-width: 656px){
  
      .sidebar, .btm-nav {
          display: none;
      }
  
      .header-navbar, .main-content {
          left: 0;
      }
  }
  
  @media (max-width: 655px) {
  
      .sidebar, .btm-nav {
          display: none;
      }
  
      .header-navbar, .main-content {
          left: 0;
      }
  
      .search-container {
          justify-content: flex-end;
      }
  
      .search-container input {
          display: none;
      }
  
      .search-container button {
          height: 40px;
          width: 40px;
          border: none;
          background-color: #ffffff;
      }
  
      .search-btn {
          height: 24px;
          width: 24px;
      }
  }
  
  @media (max-width: 425px) {
  
      .sidebar {
          display: none;
      }
  
      .header-navbar, .main-content {
          left: 0;
      }
  
      .search-container , .user-d{
          width: 40px;
      }
  
      .search-container button {
          height: 40px;
          width: 40px;
          border: none;
          background-color: #ffffff;
      }
  
      .search-btn {
          height: 24px;
          width: 24px;
      }
  
      .user-btn, .guide-button-box {
          display: none;
      }
  
      .btm-nav {
          display: flex;
          z-index: 1;
      }
  
      .videos-container {
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
  }

OUTPUT :

output
Tags: