This repository has been archived by the owner on Dec 12, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 185
/
index.html
81 lines (73 loc) · 4.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CoverVid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:400,300,100,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/styles/normalize.css" />
<link rel="stylesheet" href="assets/styles/styles.css" />
</head>
<body>
<!-- Video Markup -->
<section class="masthead">
<video class="masthead-video" autoplay loop muted poster="assets/images/poster.jpg">
<source src="assets/videos/dreamscapes.mp4" type="video/mp4">
<source src="assets/videos/dreamscapes.webm" type="video/webm">
</video>
<div class="masthead-overlay"></div>
<div class="masthead-arrow"></div>
<h1>covervid<span>Background Video Cover</span></h1>
<a class="masthead-video-credit" href="http://vimeo.com/82495711" target="_blank">
<span>Video: Dreamscapes</span>
<span>by Jonathan Besler</span>
</a>
</section>
<section class="content">
<div class="container">
<h2>Why is it special?</h2>
<p>For starters, it makes your HTML5 video behave like a background cover image, but other plugins also do that. CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background).</p>
<h2>How do I use it?</h2>
<ol>
<li>First pull the project down from <a href="http://github.com/stefanerickson/covervid">GitHub</a> and link <code>covervid.min.js</code> into your site. Make sure it is loaded after jQuery if using it.</li>
<li>It is important to note that the video you target will use its parent element to scale. With that in mind, we will create some simple markup and add some base styling to size the videos parent/wrapper element.<pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"covervid-wrapper"</span><span class="nt">></span>
<span class="nt"><video</span> <span class="na">class=</span><span class="s">"covervid-video"</span> <span class="na">autoplay</span> <span class="na">loop</span> <span class="na">poster=</span><span class="s">"img/video-fallback.png"</span><span class="nt">></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.webm"</span> <span class="na">type=</span><span class="s">"video/webm"</span><span class="nt">></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.mp4"</span> <span class="na">type=</span><span class="s">"video/mp4"</span><span class="nt">></span>
<span class="nt"></video></span>
<span class="nt"></div></span>
</pre><pre><span class="nc">.covervid-wrapper</span> <span class="p">{</span>
<span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
<span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
</pre></li>
<li>Now, we would simply call the <code>coverVid(Container-Element, Video-Width, Video-Height)</code> on the video element, passing through the native dimensions of the video. If you are using jQuery, we would call<br/> <code>$('.covervid-video').coverVid(1920, 1080);</code>.</li>
</ol>
</div>
</section>
<footer>
<div class="container">
<hr />
<iframe src="http://ghbtns.com/github-btn.html?user=stefanerickson&repo=covervid&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=stefanerickson&repo=covervid&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=stefanerickson&type=follow&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="224px" height="30px"></iframe>
</div>
</footer>
<!-- Load Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="covervid.js"></script>
<script src="assets/scripts/scripts.js"></script>
<!-- Call CoverVid -->
<script type="text/javascript">
// If using jQuery
// $('.masthead-video').coverVid(1920, 1080);
// If not using jQuery (Native Javascript)
coverVid(document.querySelector('.masthead-video'), 640, 360);
</script>
</body>
</html>