forked from akshatmittal/youtube-realtime
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (176 loc) · 9.78 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
<html>
<head>
<title>Realtime Live YouTube Subscriber Count</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="fragment" content="!" />
<!-- <meta name="viewport" content="minimal-ui, width=800px, initial-scale=1x, user-scalable=yes" /> -->
<link rel="shortcut icon" type="image/png" href="icon.png" />
<link href='//fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="odometer-theme.css" />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="odometer.min.js"></script>
<!-- Social -->
<link rel="canonical" href="https://akshatmittal.com/youtube-realtime/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@itsreallyakshat" />
<meta name="twitter:title" content="Realtime YouTube Subscriber Count" />
<meta name="twitter:description" content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
<meta name="twitter:creator" content="@itsreallyakshat" />
<meta name="twitter:image" content="https://akshatmittal.com/youtube-realtime/icon.png?u1" />
<meta property="og:title" content="Realtime YouTube Subscriber Count" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://akshatmittal.com/youtube-realtime/" />
<meta property="og:image" content="https://akshatmittal.com/youtube-realtime/icon.png?u1" />
<meta property="og:description" content="YouTube Realtime is the easiest way to view the live subscriber count for any YouTuber on the planet! Simply enter the channel name, or ID and you are good to go!" />
<meta property="og:site_name" content="Akshat Mittal" />
<meta property="fb:admins" content="100000581280466" />
<meta property="fb:app_id" content="1473140929606808" />
<meta property="article:author" content="https://www.facebook.com/itsreallyakshat" />
</head>
<body>
<div id="fb-root"></div>
<div id="cover">
<h1>YouTube Realtime</h1>
<h2>Live Subscriber Count</h2>
</div>
<div id="main" class="top">
<div class="im-img" onclick="toggleImmersive()">
<img src="res/expand-light.png" alt="Immpersive Mode" id="immersive-img" />
</div>
<div class="notice" id="deviceOrientation"><small>You are recommended to switch your device to landscape orientation.</small><br></div>
<span id="username">Loading..</span>
<br>
<i><small>▲ click to change user ▲</small></i>
<br><br>
Current realtime subscriber count from YouTube:<br>
<h2 class="count_live">..wait..</h2><br>
YouTube is still stuck at:
<br>
<h2 class="count_yt">..wait..</h2><br>
subscribers with <h2 class="count_view normalize">..wait..</h2> total video views.<br>
<span class="milestones" id="milestoneBox">
<br>You are just <h2 class="milestone_away">..wait..</h2> subscribers away from <h2 class="milestone_target">..wait..</h2>!
</span>
<br>
<small>The live count is updated every second, while count from YouTube is updated every minute.</small>
<br>
<span class="immersivex" id="immersivexBox">
<small>© <a href="https://akshatmittal.com/" target="_blank">Akshat Mittal</a></small>
</span>
</div>
<div class="" id="main">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- YouTube Realtime -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3188055178160882"
data-ad-slot="4767099859"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- This ad above funds the project for use and development. -->
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" class="accordion"/>
<label for="ac-1">Settings</label>
<article class="ac-settings">
<div class="inner">
These settings are saved in your browser and are retained even if you navigate away from this page and come back later.<br><br>
<div class="dark-theme setting">
<span>Dark Theme:</span>
<div class="onoffswitch">
<input type="checkbox" name="darkTheme" class="onoffswitch-checkbox" id="darkTheme" onchange="toggleDark()" />
<label class="onoffswitch-label" for="darkTheme">On</label>
</div>
<br><br>
<p>
Dark Theme eases the colors for continuous viewing in dark environments, but it's probably not the most beautiful thing you'll see today.
</p>
</div>
<div class="milestone setting">
<span>Milestones:</span>
<div class="onoffswitch">
<input type="checkbox" name="milestone" class="onoffswitch-checkbox" id="milestone" onchange="toggleMilestones()" />
<label class="onoffswitch-label" for="milestone">On</label>
</div>
<br><br>
<p>
Milestones automatically calculate the next milestone and tells you the required number of subscribers to hit that.
</p>
</div>
<div class="immersive setting">
<span>Immersive Mode:</span>
<div class="onoffswitch">
<input type="checkbox" name="immersive" class="onoffswitch-checkbox" id="immersive" onchange="toggleImmersive()" />
<label class="onoffswitch-label" for="immersive">On</label>
</div>
<span class='isbeta'>beta</span>
<br><br>
<p>
Immersive Mode lets you concentrate right on the counter when you are all set with everything else! Dark Theme recommended in dark environments.
</p>
</div>
</div>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" class="accordion" checked/>
<label for="ac-2">Help & Instructions</label>
<article class="ac-help">
<div class="inner">
<p>This is a simple experiment which shows the current live subscriber count on YouTube for a channel or user. The count displayed on YouTube is often incorrect because it doesn't update in realtime. The count on this page is taken directly from the Google's Infrastructure and hence is as accurate as possible.</p>
<p>After clicking <a href="javascript:newUsername();" style="border-bottom:none">change username</a> above, you can enter the new channel name in any format. You can also input search terms for a channel, this will try to automatically correct spellings in most cases. This is as good as YouTube Search itself, because it uses the same engine to search for channels.
<br><br>
You can literally enter anything that YouTube supports. Examples:<br>
<ul>
<li>Channel Username (Example: <b>PewDiePie</b>)</li>
<li>Channel ID (Example: <b>UCKlhpmbHGxBE6uw9B_uLeqQ</b>)</li>
<li>Channel Name (Example: <b>Fine Brothers Entertainment</b>)</li>
<li>YouTube URL (Example: <b>youtube.com/mkbhd</b>)</li>
<li>Search Terms (Example: <b>One Direction</b>)</li>
<li>Self Discovery Channels (Example: <b>#Music</b>)</li>
</ul>
</p>
</div>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" class="accordion"/>
<label for="ac-3">Share!</label>
<article class="ac-share">
<div class="inner">
<p>
You can share the live subscriber counts for any channel on YouTube by sharing the following URL. You can also bookmark (Ctrl/Cmd + D) the current URL to come back anytime!<br><br>
<input type="text" name="url" value="..wait.." id="shareURL" onclick="this.select()" readonly></input>
<br><br>
<button type="button" id="shareBtn" class="facebook" onclick="update.share('fb');">Share on Facebook!</button><br>
<button type="button" id="shareBtn" class="twitter" onclick="update.share('twtr');">Share on Twitter!</button>
</p>
</div>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio" class="accordion"/>
<label for="ac-4">Everything Else</label>
<article class="ac-else">
<div class="inner">
<p>
You can find more information about the project on <a href="https://github.com/akshatmittal/youtube-realtime/blob/gh-pages/README.md" target="_blank">GitHub</a> including license and contributors. You can get in touch with me over <a href="https://twitter.com/itsreallyakshat" target="_blank">Twitter</a> or <a href="mailto:[email protected]" target="_blank">email</a>, if you prefer. Do let me know if you have any feedback or ideas for this project!
</p>
<p>
I've been seeing a lot of copies of this project on the internet, please consider adding an attribution if you are planning to deploy this project on your website. If you are a YouTuber, consider using a direct link for your channel instead of creating a new clone, that'll save you from a lot of hassle. Thanks!
</p>
</div>
</article>
</div>
</section>
</div>
<div id="main">
<div class="fb-like" data-href="https://akshatmittal.com/youtube-realtime/" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div> <div class="fb-follow" data-href="https://www.facebook.com/itsreallyakshat" data-colorscheme="light" data-layout="button" data-show-faces="false"></div> <div class="g-plusone" data-size="medium" data-annotation="none"></div> <a href="https://twitter.com/itsreallyakshat" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @itsreallyakshat</a> <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=YouTube%20Realtime%20Subscriber%20Count%20by%20%40itsreallyakshat!" data-count="none" data-size="medium">Tweet</a>
<br><br>
<small>© <a href="https://akshatmittal.com/" target="_blank">Akshat Mittal</a>. Reproduction without permission is strictly forbidden.</small>
</div>
</body>
</html>