forked from scerickson/covervid
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
90 lines (83 loc) · 6.94 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NgCoverVid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/styles/normalize.css" />
<link rel="stylesheet" href="assets/styles/styles.css" />
</head>
<body ng-app="ngCovervid">
<!-- Video Markup -->
<section class="masthead">
<!-- Directive as an Element -->
<covervid class="masthead-video" autoplay loop muted height="720" width="1280">
<source src="assets/videos/dreamscapes.mp4" type="video/mp4">
<source src="assets/videos/dreamscapes.webm" type="video/webm">
</covervid>
<!-- Directive as an Attribute -->
<!-- <video covervid class="masthead-video" autoplay loop muted height="720" width="1280">
<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>NgCoverVid<span>Angular 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>Special Thanks</h2>
<p>A special thanks and shoutout to <a href="http://github.com/stefanerickson">Stefan Erickson</a> for creating the original <a href="http://github.com/stefanerickson/covervid">CoverVid</a>.</p>
<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. NgCoverVid is very lightweight, with only 1279 bytes of Javascript. 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/jfeigel/ngCovervid">GitHub</a> or install it through <a href="http://www.bower.io">Bower</a> and link <code>ngCovervid.min.js</code> into your site.<pre>bower install ng-covervid</pre></li>
<li>Add ngCovervid as a dependency of your Angular application.<pre>angular.module(<span class="nt">'app'</span>,[<span class="nt">'ngCovervid'</span>]);</pre></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. The directive must be declared as either an attribute of a video element or as an element itself.<br/><br/><div>ATTRIBUTE</div><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">covervid</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><div>ELEMENT</div><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"covervid-wrapper"</span><span class="nt">></span>
<span class="nt"><covervid</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"></covervid></span>
<span class="nt"></div></span>
</pre><br/><div>STYLES</div><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>You have the option to include the native height and width of the video as attributes of the element or let the directive determine them for you. Note that including these values as attributes will ensure there is no lag in the initial sizing of the video as the directive needs to wait for the video's metadata to load before it can resize the video.<pre><span class="nt"><covervid</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="na">height=</span><span class="s">"720"</span> <span class="na">width=</span><span class="s">"1280"</span><span class="nt">></span></pre></li>
</ol>
</div>
</section>
<footer>
<div class="container">
<hr />
<iframe src="https://ghbtns.com/github-btn.html?user=jfeigel&repo=ngCovervid&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jfeigel&repo=ngCovervid&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="156px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=jfeigel&type=follow&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="224px" height="30px"></iframe>
</div>
</footer>
<!-- Load Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="ngCovervid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/scripts/scripts.js"></script>
</body>
</html>