-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
185 lines (178 loc) · 6.97 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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!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" />
<meta
name="description"
content="a simple video player for youtube videos"
/>
<meta
name="keywords"
content="yt player, video player, youtube"
/>
<meta name="author" content="unrealapex" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/site.webmanifest" />
<title>yt player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
rel="stylesheet"
/>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/balloon.min.css">
</head>
<body>
<noscript>
<h1>yt player requires javascript. please enable javascript and reload this page to continue</h1>
<br>
</noscript>
<h1>yt player</h1>
<div class="container">
<div class="child">
<div id="notification"></div>
<div id="main-area">
<form action="javascript:void(0);">
<div class="bar">
<input
id="input-field"
type="url"
autofocus
required
placeholder="enter a youtube video url"
aria-label="enter a youtube video url"
data-balloon-pos="up"
size="24"
minlength="20"
onclick="this.select();"
/>
<button id="play" aria-label="play video" data-balloon-pos="up" disabled>play</button>
</div>
</form>
</div>
</div>
</div>
<div id="overlay">
<div id="overlay-content">
<div id="buttons-container">
<button class="overlay-buttons transparent-button material-icons-round" aria-label="close" data-balloon-pos="up"
id="close-button">
close
</button>
<button class="overlay-buttons transparent-button material-icons-round" aria-label="maximize"
data-balloon-pos="up" id="fullscreen-button">
check_box_outline_blank
</button>
<button class="overlay-buttons transparent-button material-icons-round" aria-label="minimize"
data-balloon-pos="up" id="minimize-button">
minimize
</button>
</div>
<div id="overlay-notification"></div>
<progress id="loader" aria-label="loading video..." data-balloon-pos="up"></progress>
<iframe allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</div>
<div id="expand-box" class="hidden" aria-label="click to reopen video" data-balloon-pos="left">
<img id="thumbnail" src="" alt="video thumbnail"/>
<div id="expand-hint-text">minimized video</div>
</div>
<!-- create a context menu that will open up when the user right clicks in the overlay -->
<ul id="context-menu" class="hidden"></ul>
<!-- help button -->
<button id="help" aria-label="help" data-balloon-pos="left"
onclick="document.querySelector('#help-modal').style.display='block';">?</button>
<div id="help-modal" class="modal">
<!-- Modal content -->
<div id="help-content">
<span
id="close"
class="overlay-buttons transparent-button material-icons-round"
onclick="document.querySelector('#help-modal').style.display='none';"
>close</span
>
<h3>help</h3>
<div>
yt player is a simple video player for youtube videos
<br>
made with <3 by
<a href="https://www.github.com/unrealapex" target="_blank">unrealapex</a>
<br>
<p>click the arrows below to reveal help about that specific topic</p>
</div>
<details>
<summary>basic usage</summary>
<p>
enter a video url in the input box
and click the play button. your video will load in the
overlay. the overlay is where all videos are played.
there are controls to fullscreen, minimize, and close the
overlay. minimizing the video closes the overlay and displays a
thumbnail of the video. if you click the thumbnail, you will return
to your video in the overlay. closing the overlay returns you to the
input box where you can play another video.
</p>
</details>
<details>
<summary>private mode</summary>
<p>
private mode is a feature that allows you to watch videos without
being tracked by youtube. if restricted mode is enabled for your
google account, you are able to bypass it to enable private mode, press
<kbd>shift</kbd> while clicking the play button. this will load the
video in private mode. you can also enable private mode in the
overlay by clicking its option in the context menu. the context menu
is the menu that appears when you right-click. you can access it on
the main page or in the video overlay.
</p>
</details>
<details>
<summary>keyboard shortcuts</summary>
<p>press <kbd>?</kbd> to toggle this modal.</p>
<div>
<p>focus input box <kbd>/</kbd></p>
<p>play video <kbd>enter</kbd></p>
<p>play video in private mode <kbd>shift + enter</kbd></p>
<p>full screen <kbd>f</kbd></p>
<p>reload video <kbd>r</kbd></p>
<p>minimize video overlay <kbd>m</kbd></p>
<p>open video overlay <kbd>o</kbd></p>
<p>close video overlay <kbd>esc</kbd></p>
</div>
</details>
<br>
<p>
file bug reports
<a href="https://github.com/unrealapex/yt-player/issues/new" target="_blank">here</a>.
this website is
<a href="https://github.com/unrealapex/yt-player" target="_blank">open source</a>
and is lisenced under the <a href="https://github.com/unrealapex/yt-player/blob/main/LICENSE" target="_blank">apache 2.0 lisence</a>.
</p>
</div>
</div>
</body>
</html>