forked from majovanilla/youtube-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (81 loc) · 4.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id = "top-bar">
<img id = "youtube-logo" class = "center-vertically absolute" src="img/youtube_logo.png" alt="youtube logo">
<img id = "menu-logo" class = "center-vertically absolute" src="img/menu.png" alt="menu logo">
<input id = "search-bar" class = "center-vertically absolute center-horizontally" type="text" placeholder=" Search">
<button type="submit" class="absolute center-horizontally"></button>
<img id = "camera-logo" class = "top-bar-button center-vertically absolute" src="img/camera.png" alt="camera icon">
<img id = "menu2-logo" class = "top-bar-button center-vertically" src="img/menu2.png" alt="menu icon">
<img id = "message-logo" class = "top-bar-button center-vertically" src="img/message.png" alt="message icon">
<img id = "bell-logo" class = "top-bar-button center-vertically" src="img/bell.png" alt="bell icon">
<img id = "avatar" class = "top-bar-button center-vertically" src="img/avatar.jpg" alt="avatar icon">
</header>
<div id="content">
<!-- VIDEO SIDE WITH COMMENTS -->
<object id="iframe-replace" type="text/html" class="absolute" data="https://www.youtube.com/embed/ZnuwB35GYMY" >
Error: Embedded data could not be displayed.
</object>
<div id = "video-text-bar" class="main-content absolute">
<h1 id="title" class="absolute" >How To Embed A YouTube Video</h1>
<h3 id="description" class="absolute" >techoist <br> 1000 views</h3>
<img id = "like-button" class = "comment-bar-items" src="img/like.png" alt="like icon" title="I like this video">
<h3 id= "like-button-text" class = "comment-bar-items center-horizontally">600</h3>
<img id = "dislike-button" class = "comment-bar-items" src="img/dislike.png" alt="dislike icon">
<h3 id= "dislike-button-text" class = "comment-bar-items center-horizontally">300</h3>
<img id = "share-button" class = "comment-bar-items" src="img/share.png" alt="share icon">
<h3 id= "share-button-text" class = "comment-bar-items center-horizontally">SHARE</h3>
<img id = "add-list" class = "comment-bar-items" src="img/add-list.png" alt="add to list icon">
<h3 id= "addlist-button-text" class = "comment-bar-items center-horizontally">SAVE</h3>
<img id = "more-button" class = "comment-bar-items" src="img/more.png" alt="more icon">
</div>
<div id="video-description" class="absolute">
<img id = "avatar2" class = "comment-bar-items" src="img/avatar.jpg" alt="avatar icon of the owner of the video">
<button id="subscribe-button" type="submit" class="absolute center-horizontally">SUBSCRIBE 19K</button>
<h1 id="title2" >Techoist </h1>
<h3 id="description2" ><br>How To Embed A YouTube Video <br>
Embedding a YouTube video is really easy, first just find the video that you'd like to embed.
Once you've found it, click on Share.
Within Share, you're going to click on Embed.
Here it gives you an automatically generated embed code that you can embed with.
You can change the video size to a few different sizes here, you can also make a custom size, but just for this example we're going to go with the standard 560 x 315. </h3>
</div>
<div id = "comments" class="absolute" >
<h1 id="comment-title" >77 Comments</h1>
<div id="loading-area" class = "center-vertically absolute">
<img id = "load-gif" class = "center-vertically center-horizontally" src="img/load.gif" alt="loading gif">
<h3 id = "load-gif-text" class="center-horizontally" >Loading...</h3>
</div>
</div>
<!-- SIDEBAR WITH THUMBNAILS -->
<div id = "sidebar" class="absolute">
<div>
<img class="thumbnail" alt="thumbnail1" src="img/img1.webp">
<h1>Video for Image number1...</h1>
<h3>euqueme <br> 1000 views</h3>
</div>
<div>
<img class="thumbnail" alt="thumbnail1" src="img/img2.webp">
<h1>Video for Image number 2</h1>
<h3>majovainilla <br> 80.5M views</h3>
</div>
<div>
<img class="thumbnail" alt="thumbnail1" src="img/img3.webp">
<h1>Video for Image number3...</h1>
<h3>euqueme <br> 2M views</h3>
</div>
<div>
<img class="thumbnail" alt="thumbnail1" src="img/img4.webp">
<h1>Video for Image number 4</h1>
<h3>majorvainilla <br> 2587 views</h3>
</div>
</div>
</div>
<link rel="stylesheet" href="styles.css">
</body>
</html>