Hello Readers, This code is an HTML skeleton for a YouTube video page with placeholders for content such as video thumbnails and titles. The code starts with the declaration of the HTML version and the language used. Then, it includes the head section with some meta information and a link to an external style sheet called “style.css”.
The code has a header tag with a menu and an unordered list of empty items. The body also contains a section tag with two div elements: “sidemenu” and “main”.
The “main” div is where the video thumbnails and titles will go. It includes 15 “contant” divs that contain two child divs; one with a class “video” and another with a class “detail”. The “video” divs are placeholders for the video thumbnails and the “detail” divs are placeholders for the video titles and images.
Overall, this code provides a basic structure for a YouTube video page that can be easily customize with real content by replacing the placeholders with actual videos and titles. The external style sheet can also be modifie to change the appearance of the page.
Video Tutorial of YouTube Clone Skeleton Loading
To see a live demonstration of The YouTube Clone Skeleton Loading Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Quick Loading Animation
HTML:
Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Skeleton</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</header>
<section>
<div class="sidemenu"></div>
<div class="main">
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="contant">
<div class="video"></div>
<div class="detail">
<div class="img"></div>
<div class="title">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is a HTML code for a basic YouTube skeleton. The code includes the basic structure and layout for a YouTube page without any actual content.
The first part of the code includes the head section, where meta tags such as character set, compatibility with Internet Explorer, and viewport for mobile devices are define. It also includes a title tag that gives a name to the webpage and a link tag to connect to an external stylesheet.
The body section is where the actual layout of the webpage is define. The header section includes a menu button and an unordered list with four empty list items.
The section element includes a side menu div and a main div. The main div has multiple divs with the class “content” which contains a video div and a detail div. The detail div consists of an image div and a title div that includes two h1 tags each.
This code provides the basic framework for a YouTube page with placeholders for videos and their details. It is designe to be use as a starting point for a more customized YouTube page. This HTML code can be further style using the CSS file, which is link in the head section.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--color1: #252525;
--color2: #292929;
--color3: #1F1F1F;
--color4: #4C4C4C;
--color5: #747373;
}
body{
background: var(--color3);
overflow-x: hidden;
}
header{
position: fixed;
width: 100%;
height: 60px;
background: var(--color1);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
header .menu{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 4px;
margin: 30px 20px;
background: var(--color4);
box-shadow: 0 -8px 0 var(--color4),
0 8px 0 var(--color4);
border-radius: 20px;
cursor: pointer;
}
header ul{
position: absolute;
top: 5px;
right: 10px;
width: 500px;
height: 50px;
display: flex;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
header ul li{
list-style: none;
width: 40px;
height: 40px;
background: var(--color2);
margin: 8px;
border-radius: 50%;
justify-content: center;
}
section{
position: relative;
width: 100%;
}
.sidemenu{
position: fixed;
top: 60px;
width: 240px;
height: 100%;
background: var(--color2);
}
.main{
position: absolute;
top: 60px;
left: 200px;
width: calc(100% - 200px);
margin: 20px 60px;
display: flex;
flex-wrap: wrap;
}
.main .contant{
position: relative;
width: 290px;
height: 250px;
margin: 0 10px;
margin-bottom: 40px;
}
.main .contant .video{
position: relative;
width: 100%;
height: 180px;
background: var(--color2);
cursor: pointer;
}
.detail{
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.detail .img{
position: absolute;
bottom: 20px;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color2);
cursor: pointer;
}
.detail .title{
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.title h1{
position: absolute;
bottom: 20px;
left: -10px;
width: 210px;
height: 20px;
background: var(--color2);
border-radius: 2px;
margin: 20px 60px;
cursor: pointer;
}
.title h1:last-child{
position: absolute;
bottom: -10px;
left: -10px;
width: 120px;
}
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: var(--color3);
}
::-webkit-scrollbar-thumb{
background: var(--color5);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
background: var(--color4);
}
This appears to be CSS code. It sets default styles for all elements, defines custom color variables, and styles different parts of a webpage such as the header, side menu, and main content area.
The * selector sets default margin and padding values to 0 for all elements and uses box-sizing: border-box to include padding and border in the element’s total width and height.
:root defines custom color variables using the — prefix. These variables are then use throughout the rest of the code to apply consistent colors to various elements.
The header and header ul selectors style the website’s top navigation menu. The .menu class styles a hamburger menu icon and the ul li selector styles each menu item as a circle with a background color.
The section, .sidemenu, and .main selectors style different parts of the website’s main content area, including a side menu on the left and a main content area on the right. The .main .contant and .main .contant .video selectors style individual video content boxes within the main content area.
The title and title h1 selectors style a text overlay on top of each video content box. Finally, there are styles for customizing the appearance of the browser’s scrollbar.
Summary:
This code defines the styling for a webpage layout, including a fixed header with a dropdown menu and social media icons, a side menu, and a main section with video content displayed in a grid format. The styling uses CSS variables for the color scheme, and includes some special effects for scrollbars. The layout is responsive and designed for a desktop screen.
