forked from simonlidesign/YouTubeHDThumbnail
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
97 lines (88 loc) · 4.12 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Embedding HD YouTube Videos with High Quality Thumbnails</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/YouTube.HD.Thumbnail.css">
<style>
html, body{
font-size: 23px;
line-height: 1.6;
color: #333;
font-family: 'PT Sans', serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: 700;
}
.container{
max-width: 37.5em;
margin-bottom: 4em;
}
h1{
margin-top: 2em;
margin-bottom: .5em;
font-size: 2.25em;
}
h2{
margin-top: 1em;
margin-bottom: .5em;
font-size: 1.875em;
}
h5{
font-size: .875em;
}
pre{
font-size: .8125em;
}
</style>
</head>
<body>
<div class="container">
<h1>Embedding HD YouTube Videos with High Quality Thumbnails</h1>
<p>This jQuery plugin ensures that you will get the highest quality thumbnails for your HD YouTube videos, regardless of the embedding sizes or the original thumbnail quality settings of the YouTube videos.</p>
<h2>Examples</h2>
<h5>Original embed (Video credit: <a href="https://www.youtube.com/watch?v=xzUumjHL5zE" target="_blank">Test - 3 Minute Track (Original Mix) by Ben Thomas</a>)</h5>
<p></p>
<iframe width="853" height="480" src="https://www.youtube.com/embed/xzUumjHL5zE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<h5>Embed using this plugin with high quality thumbnail</h5>
<iframe class="yt-hd-thumbnail" width="853" height="480" src="https://www.youtube.com/embed/xzUumjHL5zE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<h5>Default style</h5>
<iframe class="yt-hd-thumbnail" width="853" height="480" src="https://www.youtube.com/embed/_skaxGTnWUU?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<h5>Darkend thumbnail with hover effect</h5>
<iframe class="yt-hd-thumbnail-darken" width="853" height="480" src="https://www.youtube.com/embed/5aOSxep4ni0?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<h2>Usage</h2>
<p>Include the CSS stylesheet within the head tag.</p>
<pre><link rel="stylesheet" href="css/YouTube.HD.Thumbnail.css"></pre>
<p>Then include the JavaScript file before the closing body tag.</p>
<pre><script src="js/jQuery.YouTube.HD.Thumbnail.js"></script></pre>
<p>Copy the code for embedding from your YouTube video and add a class name like <strong>yt-hd-thumbnail</strong>.</p>
<pre><iframe class="yt-hd-thumbnail" width="560" height="315" src="https://www.youtube.com/embed/5aOSxep4ni0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></pre>
<p>Activate the plugin by adding the following code to your JavaScript file.</p>
<pre>$('iframe.yt-hd-thumbnail').youTubeHDThumbnail({
darkenThumbnail: false
});</pre>
<h2>Options</h2>
The following options are provided in this jQuery plugin.
<ul>
<li><strong>darkenThumbnail</strong>: true / false<br>Specifies whether to darken the thumbnail</li>
</ul>
<h2>About</h2>
<p>MIT License</p>
<p>Created by <a href="http://www.simon-li.com" target="blank">Simon Li</a> in Sep 2016</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"><\/script>')</script>
<script src="js/jQuery.YouTube.HD.Thumbnail.js"></script>
<script>
(function ($) {
$('iframe.yt-hd-thumbnail').youTubeHDThumbnail({darkenThumbnail: false});
$('iframe.yt-hd-thumbnail-darken').youTubeHDThumbnail({darkenThumbnail: true});
})(jQuery);
</script>
</body>
</html>