-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
224 lines (209 loc) · 12.5 KB
/
index.html
File metadata and controls
224 lines (209 loc) · 12.5 KB
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Yougra is a free YouTube media downloader that lets you download videos, music, or even playlists/albums as either MP3 or MP4." />
<meta name="keywords" content="youtube downloader, youtube to mp3, youtube to mp4, free youtube downloader, youtube music downloader, video downloader" />
<meta name="author" content="Kyrin" />
<meta name="robots" content="index, follow" />
<title>Yougra - YouTube Media Grabber</title>
<meta property="og:title" content="Yougra – Free YouTube Media Downloader" />
<meta property="og:description" content="Download YouTube videos/music as mp4 or mp3 for free in any quality." />
<meta property="og:image" content="https://yougra.site/images/Yougra_logo_192x192.png" />
<meta property="og:url" content="https://yougra.site" />
<meta property="og:type" content="website" />
<link rel="icon" href="Yougra.ico" />
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/images/Yougra_logo_192x192.png">
<link rel="canonical" href="https://yougra.site/" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script defer src="/_vercel/insights/script.js"></script>
</head>
<body>
<header>
<div id="logo"><img src="./images/Yougra logo.png" alt="Yougra logo" /><h1>Yougra</h1></div> <span id="settings-nav"><i class="fa-solid fa-gear"></i></span>
</header>
<span id="version"> Beta 1.7 </span>
<div id="settings" style="visibility: hidden;">
<div>
<i id="close-settings" class="fa-xl fa-solid fa-circle-xmark"></i>
<div class="sets" id="link-help">
<h3>How to get an album link?</h3>
<h4>Mobile</h4>
<img src="./images/Mobile help.jpeg" alt="Mobile help"/>
<p>Go to the album you wanna download on <strong>YouTube music</strong>, tap the share icon, and choose to copy. There you go. Now you have the link.</p>
<h4>Computer</h4>
<img src="./images/PC help.jpeg" alt="PC help"/>
<p>While scrolling looking at a list of albums on <strong>YouTube music</strong> on PC, just click those 3 dots and you should see an option to share and copy the link.</p>
</div>
<div class="sets" id="d-method">
<h3>Download method</h3>
<h4 id="immediate">Immediate</h4>
<p>This ensures that every <strong>video</strong> you download always start immediatly without processing. Keep in mind that the file may show up as corrupted for some devices.</p>
<h4 id="process">Process</h4>
<p>This ensures that the <strong>video</strong> works on any device and is also seekable by having a process of downloading and merging on the server, then the download will start. Not recommended for large downloads if you are inpatient as it will take a long time before it starts the download. There is also a max file size requirement (5GB) for downloading videos for this option.</p>
</div>
<div class="sets" id="bug-report">
<h3>Noticed any bugs/glitches?</h3>
<h4>Tell me</h4>
<p>Remember that this website is still in beta/testing stage, so errors WILL happen eventually. Just tell me if you noticed anything odd (click it below): <br /> <a href="mailto:kyrinkompi@gmail.com">kyrinkompi@gmail.com</a></p>
</div>
<div class="sets" id="warning">
<h3>Warnings</h3>
<h5> Do not pause the download as it will most likely not be able to resume again </h5>
<h5> Try not to download multiple videos at the same time if your internet is slow (it may cause errors) </h5>
<h5> Merging will take a long time for large videos when choosing the process download method. How long it takes depends on how large the file is </h5>
</div>
</div>
</div>
<div id="update">
<div>
<h3>Beta 1.7</h3>
<dl>
<dt>⟬ <strong>Minor changes</strong> ⟭</dt>
<dd>⌊ Added "Finding..." text in buttons of the link section when it's finding </dd>
<dd>⌊ Changed some text for the description in the search section </dd>
<dt>⟬ <strong>Improved navigation bar design & UI</strong> ⟭</dt>
<dd>⌊ You can now click the logo to quickly go back to the search section </dd>
<dd>⌊ Added the version number to the navbar </dd>
<dt>⟬ <strong>Shorts + Playlist/Album searching</strong> ⟭</dt>
<dd>⌊ Search results will now include shorts, playlists/albums. </dd>
<dt>⟬ <strong>More search results</strong> ⟭</dt>
<dd>⌊ Search results will now be increased from 15 to 45 total. 30 for videos, and 15 for playlists/albums </dd>
</dl>
<center><button id="close-update" aria-label="Close update overlay">Nice!</button></center>
</div>
</div>
<div id="error">
<div>
<i id="close-error" class="fa-xl fa-solid fa-circle-xmark"></i>
<h3 id="err-title">Error title</h3>
<p id="err-msg">Err message</p>
<a href="mailto:kyrinkompi@gmail.com">Tell Kyrin to fix this</a>😑
</div>
</div>
<main>
<div id="modes">
<span id="search-o">Search</span>
<span id="link-o">Use link</span>
</div>
<div id="search-mode">
<h4>Search for a <span class="switch">song or video</span>:</h4>
<input type="text" id="search-val" placeholder="Enter video/song title or creator name" />
<button id="search" aria-label="Search YouTube video/song" onclick="search()">Search</button>
<p id="search-err-msg"></p>
<div id="search-results">
<h3 id="v/s">Videos/Songs</h3>
<div id="vids" style="display: none"></div>
<h3 id="p/a">Playlists/Albums</h3>
<div id="plists" style="display: none"></div>
</div>
<br />
<div id="info">
<h4>What is Yougra about?</h4>
<p>
Yougra is a web app that allows you to download videos, audio, songs, playlists, albums, and more.
Simply search for what you want above and click the media you want to download as either
video or audio. Once you select a video, you will be able to choose from different
video quality options before downloading.
</p>
<h4>Help</h4>
<p>
In addition to searching, you can paste the exact YouTube video or song link in the
<strong>"Use link"</strong> section located above the search bar on the right. In this
section, you can also paste YouTube playlist or album links. <em>Playlists are
currently downloadable as audio only</em>. If you're unsure how to get a playlist link, you
can find instructions in the Settings menu at the top right (the gear icon).
</p>
<p>
<i><strong>Pro tip:</strong> Add "album" next to album name when searching,
to easily find actual albums instead of playlists pretending to be albums.</i>
</p>
<p>
Speaking of Settings, you will also find download methods there for <strong>videos</strong>.
There are two methods: <strong>Immediate</strong> and <strong>Process</strong>. By default,
the Process method is selected, but you can switch between them at any time. The
differences between these methods are explained in the Settings menu.
</p>
</div>
</div>
<div id="title-tp"></div>
<div id="link-mode">
<div id="v-info">
<h4>Enter a YouTube video/song link:</h4>
<input type="text" id="vid-link" placeholder="https://youtube.com/watch?v=SvwfkTmyHFU">
<button id="find-info" aria-label="Find YouTube video" onclick="fetchVideo()">Find it</button>
<p id="video-err-msg"></p>
<br />
<div id="video-info">
<div id="loader-1" class="loader"></div>
<div id="v">
<img id="v-thumbnail" src="" alt="YouTube video thumbnail" />
<span id="length"></span>
<span id="v-d-options-b"><svg id="dots" onclick="toggleVdownloadOptions()" width="25px" height="25px" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.7 12.1143C4.82423 12.1143 4.11429 12.8242 4.11429 13.7C4.11429 14.5758 4.82423 15.2857 5.7 15.2857C6.57577 15.2857 7.28571 14.5758 7.28571 13.7C7.28571 12.8242 6.57577 12.1143 5.7 12.1143ZM2 13.7C2 11.6565 3.65655 10 5.7 10C7.74345 10 9.4 11.6565 9.4 13.7C9.4 15.7435 7.74345 17.4 5.7 17.4C3.65655 17.4 2 15.7435 2 13.7Z" fill="#ccc" fill-rule="evenodd" /><path clip-rule="evenodd" d="M22.7 12.1143C21.8242 12.1143 21.1143 12.8242 21.1143 13.7C21.1143 14.5758 21.8242 15.2857 22.7 15.2857C23.5758 15.2857 24.2857 14.5758 24.2857 13.7C24.2857 12.8242 23.5758 12.1143 22.7 12.1143ZM19 13.7C19 11.6565 20.6565 10 22.7 10C24.7435 10 26.4 11.6565 26.4 13.7C26.4 15.7435 24.7435 17.4 22.7 17.4C20.6565 17.4 19 15.7435 19 13.7Z" fill="#ccc" fill-rule="evenodd"/><path clip-rule="evenodd" d="M14.2 12.1143C13.3242 12.1143 12.6143 12.8242 12.6143 13.7C12.6143 14.5758 13.3242 15.2857 14.2 15.2857C15.0758 15.2857 15.7857 14.5758 15.7857 13.7C15.7857 12.8242 15.0758 12.1143 14.2 12.1143ZM10.5 13.7C10.5 11.6565 12.1565 10 14.2 10C16.2435 10 17.9 11.6565 17.9 13.7C17.9 15.7435 16.2435 17.4 14.2 17.4C12.1565 17.4 10.5 15.7435 10.5 13.7Z" fill="#ccc" fill-rule="evenodd"/></svg></span>
<span id="selection-msg"></span>
<div id="details">
<div id="v-d-options">
<p><strong>Download it as...</strong></p>
<hr />
<div id="vid-o"></div>
<div id="aud-o"></div>
</div>
<h2 id="v-title"></h2>
<p id="v-author"></p>
<p id="posted"></p>
<p id="views"></p>
<p id="likes"></p>
<button id="download">Download</button>
</div>
<p id="progress-txt"></p>
<div id="progress-bar"><div id="progress"></div></div>
</div>
</div>
</div>
<hr id ="hl" color="#e55" />
<div id="playlist">
<h4>Enter a YouTube <span class="switch">playlist</span> link:</h4>
<input type="text" id="playlist-link" placeholder="https://youtube.com/playlist?list=PLQwL0_xxmc6zA0fnVvP8Vpy6gb3R96ZoQ">
<button id="find-list" aria-label="Find YouTube playlist" onclick="fetchPlaylist()">Find it</button>
<p id="playlist-err-msg"></p>
<div id="playlist-info">
<div id="loader-2" class="loader"></div>
<div id="p">
<span id="p-d-options-b"><svg id="dots" onclick="togglePdownloadOptions()" width="25px" height="25px" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.7 12.1143C4.82423 12.1143 4.11429 12.8242 4.11429 13.7C4.11429 14.5758 4.82423 15.2857 5.7 15.2857C6.57577 15.2857 7.28571 14.5758 7.28571 13.7C7.28571 12.8242 6.57577 12.1143 5.7 12.1143ZM2 13.7C2 11.6565 3.65655 10 5.7 10C7.74345 10 9.4 11.6565 9.4 13.7C9.4 15.7435 7.74345 17.4 5.7 17.4C3.65655 17.4 2 15.7435 2 13.7Z" fill="#ccc" fill-rule="evenodd" /><path clip-rule="evenodd" d="M22.7 12.1143C21.8242 12.1143 21.1143 12.8242 21.1143 13.7C21.1143 14.5758 21.8242 15.2857 22.7 15.2857C23.5758 15.2857 24.2857 14.5758 24.2857 13.7C24.2857 12.8242 23.5758 12.1143 22.7 12.1143ZM19 13.7C19 11.6565 20.6565 10 22.7 10C24.7435 10 26.4 11.6565 26.4 13.7C26.4 15.7435 24.7435 17.4 22.7 17.4C20.6565 17.4 19 15.7435 19 13.7Z" fill="#ccc" fill-rule="evenodd"/><path clip-rule="evenodd" d="M14.2 12.1143C13.3242 12.1143 12.6143 12.8242 12.6143 13.7C12.6143 14.5758 13.3242 15.2857 14.2 15.2857C15.0758 15.2857 15.7857 14.5758 15.7857 13.7C15.7857 12.8242 15.0758 12.1143 14.2 12.1143ZM10.5 13.7C10.5 11.6565 12.1565 10 14.2 10C16.2435 10 17.9 11.6565 17.9 13.7C17.9 15.7435 16.2435 17.4 14.2 17.4C12.1565 17.4 10.5 15.7435 10.5 13.7Z" fill="#ccc" fill-rule="evenodd"/></svg></span>
<div id="p-d-options">
<p>You can click each song to download or just:</p>
<hr />
<center><button id="download-all">Download all</button></center>
</div>
<div id="p-header">
<img id="p-thumbnail" alt="Youtube playlist thumbnail" />
<div id="p-info">
<h4 id="p-title"></h4>
<p id="p-author"></p>
<p id="a-amount"></p>
</div>
</div>
<div id="songs"></div>
</div>
</div>
</div>
</div>
</main>
<script> window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); } </script>
<script src="./functions.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Yougra",
"url": "https://yougra.site",
"description": "Free YouTube media downloader for MP3 and MP4.",
"applicationCategory": "Multimedia",
"operatingSystem": "All"
}
</script>
</body>
</html>