-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwatch.html
140 lines (131 loc) · 6.57 KB
/
watch.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Video Player</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
.dark-mode {
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">YouTube</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Trending</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subscriptions</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>
<div class="mt-4">
<h4>Video Title</h4>
<div class="text-muted">
<span>1,234,567 views</span> • <span>Jan 1, 2024</span>
</div>
<p>Description of the video goes here.</p>
<!-- Like, Dislike, Views, Date, Report, Download buttons -->
<div class="d-flex justify-content-center align-items-center">
<div>
<button type="button" class="btn btn-sm btn-outline-primary mr-2"><i class="material-icons">thumb_up</i></button>
<button type="button" class="btn btn-sm btn-outline-danger mr-2"><i class="material-icons">thumb_down</i></button>
<button type="button" class="btn btn-sm btn-outline-secondary mr-2"><i class="material-icons">code</i></button>
<button type="button" class="btn btn-sm btn-outline-danger mr-2"><i class="material-icons">flag</i></button>
<button type="button" class="btn btn-sm btn-outline-success mr-2"><i class="material-icons">get_app</i></button>
</div>
</div>
<!-- Comments section -->
<h5 class="mt-4">Comments</h5>
<div class="card">
<div class="card-body">
<p class="card-text">Comment 1</p>
</div>
</div>
<div class="card mt-2">
<div class="card-body">
<p class="card-text">Comment 2</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Channel information -->
<div class="card mb-3">
<div class="card-body">
<div class="d-flex align-items-center">
<img src="https://via.placeholder.com/50" alt="Channel Logo" class="rounded-circle mr-2">
<div>
<h5 class="card-title">Channel Name</h5>
<p class="card-text">10M Subscribers</p>
</div>
</div>
</div>
</div>
<!-- Recommended videos section -->
<h5 class="mt-4">Recommended Videos</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<img src="https://via.placeholder.com/800x450" alt="Video Thumbnail" class="img-fluid">
<div class="caption">
<h6 class="mt-2">Video Title 1</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://via.placeholder.com/800x450" alt="Video Thumbnail" class="img-fluid">
<div class="caption">
<h6 class="mt-2">Video Title 2</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://via.placeholder.com/800x450" alt="Video Thumbnail" class="img-fluid">
<div class="caption">
<h6 class="mt-2">Video Title 3</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://via.placeholder.com/800x450" alt="Video Thumbnail" class="img-fluid">
<div class="caption">
<h6 class="mt-2">Video Title 4</h6>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<img src="https://via.placeholder.com/800x450" alt="Video Thumbnail" class="img-fluid">
<div class="caption">
<h6 class="mt-2">Video Title 5</h6>
</div>
</a>
</div>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<span class="text-muted">© 2024 YouTube, Inc.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>