forked from mattybow/gfy-cat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
222 lines (207 loc) · 24 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
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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/platform/platform.js"></script>
<!--uncomment this out for dev-->
<!--<link rel="import" href="src/gfy-cat/gfy-cat.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/x-gif/dist/x-gif.html">-->
<!--comment this out for dev, vulcanize takes too long on livereload-->
<link rel="import" href="gfy-cat-demo.vulcanized.html">
<style>
body {
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body unresolved>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="ribbon-clip">
<div class="ribbon">
<a href="//github.com/mattybow/gfy-cat">Fork me on GitHub</a>
</div>
</div>
<div class="jumbotron ctr">
<div class="container">
<h1><gfy-cat></h1>
<p>is a polymer element for animated gifs that offers</p>
<div class="row space-md">
<div class="col-md-3 ctr">
<div class="icon-md">
<svg viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <g> <g> <g> <rect x="64.573" y="239.624" width="143.059" height="524.963" style="fill:#515151;"/> </g> <g> <rect x="64.573" y="52.5592" width="143.059" height="180.46" style="fill:rgb(134,134,134);"/> </g> </g> <g> <g> <g> <rect x="244.854" y="569.997" width="143.059" height="194.59" style="fill:#515151;"/> </g> <g> <rect x="244.854" y="367.739" width="143.059" height="194.59" style="fill:rgb(134,134,134);"/> </g> <g> <rect x="421.862" y="451.546" width="143.059" height="313.04" style="fill:#515151;"/> </g> <g> <rect x="421.862" y="155.879" width="143.059" height="289.832" style="fill:rgb(134,134,134);"/> </g> <g> <rect x="605.717" y="579.996" width="143.059" height="184.59" style="fill:#515151;"/> </g> <g> <rect x="605.717" y="388.721" width="143.059" height="184.59" style="fill:rgb(134,134,134);"/> </g> </g> </g> </g> </svg>
</div>
<div class="icon-text"><h4>better performance</h4></div>
</div>
<div class="col-md-3 ctr">
<div class="icon-md">
<svg viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.41421;"> <g> <g> <path d="M659.687,400L136.742,753.178L136.742,46.822L659.687,400Z" style="fill:rgb(134,134,134);"/> </g> </g> </svg>
</div>
<div class="icon-text"><h4>integrated controls</h4></div>
</div>
<div class="col-md-3 ctr">
<div class="icon-md">
<svg viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <g> <g> <path d="M614.353,240.602L468.05,102.41L614.353,102.41L614.353,240.602Z" style="fill:#515151;"/> </g> <g> <path d="M136.442,67.1005L663.558,67.1005L663.558,732.9L136.442,732.9L136.442,67.1005ZM209.705,554.595L590.295,554.595L590.295,604.646L209.705,604.646L209.705,554.595ZM209.705,443.119L590.295,443.119L590.295,493.17L209.705,493.17L209.705,443.119ZM209.705,331.642L590.295,331.642L590.295,381.694L209.705,381.694L209.705,331.642ZM209.705,220.166L534.19,220.166L534.19,270.217L209.705,270.217L209.705,220.166Z" style="fill:rgb(134,134,134);"/> </g> </g> </svg>
</div>
<div class="icon-text"><h4>smaller file size</h4></div>
</div>
<div class="col-md-3 ctr">
<div class="icon-md">
<svg viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.41421;"> <g> <g> <path d="M252.287,612.516L37.0151,397.245L37.017,396.872L250.88,187.486L285.859,223.213L107.914,397.433L287.642,577.161L252.287,612.516Z" style="fill:rgb(134,134,134);"/> </g> <g> <path d="M549.12,612.514L514.141,576.787L692.086,402.567L512.358,222.839L547.713,187.484L762.985,402.755L762.983,403.128L549.12,612.514Z" style="fill:rgb(134,134,134);"/> </g> <g> <path d="M438.692,187.134L489.539,187.134L361.308,612.866L310.461,612.866L438.692,187.134Z" style="fill:rgb(134,134,134);"/> </g> </g> </svg>
</div>
<div class="icon-text"><h4>ease of use</h4></div>
</div>
</div>
<div class="ctr">
<p><a href="//github.com/mattybow/gfy-cat"><paper-button recenteringTouch="true" unresolved>check it out »</paper-button></a></p>
</div>
</div>
</div>
<div class="container examples">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<!-- Using Custom Elements -->
<gfy-cat src="http://media2.giphy.com/media/BP9eSu9cnnGN2/giphy.gif" color="rgba(255,255,255,0.5)" fill="true" loop></gfy-cat>
</div>
<div class="col-md-6 col-md-offset-1">
<div class="row">
<div class="col-md-12">
<h2 class="no-top-mar">example 1</h2>
<p>src attribute contains the valid url to a .gif which then fetches the gfy-cat gfyName tied to the converted media asset</p>
<p>loops infinitely if loop attribute is specified</p>
<p>controls filled with transparent color</p>
</div>
</div>
<div class="row gist">
<div class="col-md-12">
<script src="https://gist.github.com/mattybow/5da2f792c79bc2402a57.js"></script>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>example 2</h2>
<p>gfyName attribute used because converted URI is known</p>
<p>loops ntimes, then pauses</p>
<p>fill attribute not specified so svg is not filled</p>
</div>
</div>
<div class="row">
<div class="col-md-12 gist">
<script src="https://gist.github.com/mattybow/a5d8dda766967b125d0a.js"></script>
</div>
</div>
<div class="full-page">
<gfy-cat gfyName="LankyMellowFlycatcher" color="rgba(255,255,255,0.5)" ntimes="3"></gfy-cat>
</div>
</div> <!-- /container -->
<div class="container info">
<div class="row">
<div class="col-md-12">
<div class="row link-info">
<div class="col-md-4">
<div class="imageholder">
<a href="https://www.polymer-project.org"><img src="images/p-logo.svg" alt="polymer logo"></a>
</div>
<a href="https://www.polymer-project.org"><h2 class="ctr">polymer</h2></a>
<p>is google's framework for web-components that leverages emerging standards like <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/" class="link">shadow-dom</a>, <a href="https://www.polymer-project.org/docs/polymer/databinding.html#templates-with-data-binding"><code><template></code></a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/" class="link">html imports</a> and includes <a href="https://www.polymer-project.org/docs/polymer/databinding.html" class="link">2-way data binding</a>, filters, events, and other good things that allow you to build and deploy modular html elements</p>
</div>
<div class="col-md-4">
<div class="imageholder">
<a href="http://gfycat.com/"><img src="images/gfycat.svg" alt="gfylogo"></a>
</div>
<a href="http://gfycat.com/"><h2 class="ctr">gfycat</h2></a>
<p>is a web conversion service that takes an asset like a .gif from imgur or giphy and hosts the converted webm or mp4 file on AWS</p>
</div>
<div class="col-md-4">
<div class="imageholder">
<x-gif src="http://i.imgur.com/m25uYzq.gif" n-times="50"></x-gif>
</div>
<a href="https://github.com/geelen/x-gif"><h2 class="ctr">x-gif</h2></a>
<p>gfy-cat was partially inspired by <a href="https://github.com/geelen/x-gif" class="link">x-gif</a> which does have the benefit of using pngs that can maintain a transparent background, so if you need something borderless, this might be a good solution</p>
</div>
</div>
</div>
</div>
<div class="row browser-info">
<div class="col-md-6">
<h2 id="browser-header">desktop compatibility</h2>
<p>tested on evergreen browsers (requires platform.js polyfill)</p>
</div>
<div class="col-md-6 browser-icons">
<div class="browsers">
<svg enable-background="new 0 0 32 32" id="chrome" version="1.0" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M16,24.188c-1.625,0-3.104-0.438-4.438-1.312c-1.334-0.875-2.334-2-3-3.375L2,8c-1.375,2.459-2,5.209-2,8 c0,4,1.302,7.49,3.906,10.469c2.604,2.979,5.844,4.76,9.719,5.344l4.641-8.031C17.799,23.919,17.02,24.188,16,24.188z" fill="#4AAE48"/><path d="M10.969,9.531C12.447,8.386,14.125,8,16,8c0.25,0,13.75,0,13.75,0c-1.417-2.416-3.344-4.458-5.781-5.875 C21.531,0.709,18.875,0,16,0c-2.5,0-4.834,0.531-7,1.594C6.833,2.656,4.828,4.203,3.359,6.188L8,14 C8.458,12.209,9.489,10.678,10.969,9.531z" fill="#EA3939"/><path d="M30.797,10H21.5c1.625,1.625,2.688,3.709,2.688,6c0,1.709-0.479,3.271-1.438,4.688L16.188,32 c4.375-0.042,8.104-1.625,11.188-4.75C30.458,24.125,32,20.375,32,16C32,13.959,31.656,11.812,30.797,10z" fill="#FED14B"/><circle cx="16" cy="16" fill="#188FD1" r="6"/></g><g/><g/><g/><g/><g/><g/></svg>
<svg enable-background="new 0 0 32 32" id="safari" version="1.0" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M26.594,6.406C23.656,3.469,20.125,2,16,2c-0.75,0-1.479,0.062-2.188,0.188 c-0.042-0.041-0.062-0.083-0.062-0.125c0.458-0.333,0.625-0.708,0.5-1.125C14.125,0.312,13.646,0,12.812,0 c-0.167,0-0.334,0.021-0.5,0.062c-0.459,0.084-0.823,0.281-1.094,0.594c-0.271,0.312-0.365,0.636-0.281,0.969 c0.083,0.459,0.396,0.75,0.938,0.875v0.062C8.708,3.479,6.104,5.271,4.062,7.938C2.021,10.604,1,13.625,1,17 c0,4.125,1.469,7.656,4.406,10.594S11.875,32,16,32s7.656-1.469,10.594-4.406S31,21.125,31,17S29.531,9.344,26.594,6.406z M24.062,25.062c-1.375,1.375-3,2.334-4.875,2.875l-1.312-2.188l-0.375,2.5c-0.5,0.084-1,0.125-1.5,0.125 c-3.125,0-5.812-1.104-8.062-3.312c-1.375-1.375-2.334-3-2.875-4.875l2.188-1.312L4.75,18.5c-0.084-0.5-0.125-1-0.125-1.5 c0-3.125,1.104-5.812,3.312-8.062c1.375-1.375,3-2.333,4.875-2.875l1.312,2.188l0.375-2.5c0.5-0.083,1-0.125,1.5-0.125 c3.125,0,5.812,1.104,8.062,3.312c1.375,1.375,2.333,3,2.875,4.875l-2.188,1.312l2.5,0.375c0.083,0.5,0.125,1,0.125,1.5 C27.375,20.125,26.271,22.812,24.062,25.062z" fill="#E6E6E6"/><path d="M13.5,15.375c-0.459,0.709-0.604,1.459-0.438,2.25c0.041,0.167,0.104,0.354,0.188,0.562l1.688-2.25l2.25-1.688 c-0.25-0.125-0.521-0.208-0.812-0.25c-0.125,0-0.25,0-0.375,0c-0.209,0-0.417,0.021-0.625,0.062 C14.583,14.229,13.958,14.667,13.5,15.375z"/><path d="M18.75,18.188C19,17.604,19.062,17,18.938,16.375c-0.042-0.166-0.104-0.354-0.188-0.562l-1.688,2.25l-2.25,1.688 c0.25,0.125,0.521,0.209,0.812,0.25c0.125,0,0.25,0,0.375,0c0.208,0,0.416-0.021,0.625-0.062c0.333-0.083,0.646-0.208,0.938-0.375 C18.104,19.229,18.5,18.771,18.75,18.188z"/><path d="M27.25,15.484l-2.5-0.375l2.188-1.312c-0.542-1.875-1.5-3.5-2.875-4.875 C21.812,6.714,19.125,5.609,16,5.609c-0.5,0-1,0.042-1.5,0.125l-0.375,2.5l-1.312-2.188c-1.875,0.542-3.5,1.5-4.875,2.875 c-2.209,2.25-3.312,4.938-3.312,8.062c0,0.5,0.041,1,0.125,1.5l2.5,0.375l-2.188,1.312c0.541,1.875,1.5,3.5,2.875,4.875 c2.25,2.209,4.938,3.312,8.062,3.312c0.5,0,1-0.041,1.5-0.125l0.375-2.5l1.312,2.188c1.875-0.541,3.5-1.5,4.875-2.875 c2.208-2.25,3.312-4.938,3.312-8.062C27.375,16.484,27.333,15.984,27.25,15.484z" fill="#188FD1"/><path d="M20.698,18.71l-2.202-1.748c0-0.029-0.007-0.057-0.009-0.086l3.856-2.834l-4.646,1.132 c-0.021-0.019-0.043-0.034-0.063-0.053l0.076-2.819l-1.748,2.202c-0.029,0-0.057,0.007-0.086,0.009l-2.835-3.856l1.133,4.646 c-0.019,0.021-0.035,0.043-0.053,0.064l-2.819-0.077l2.202,1.749c0,0.029,0.007,0.057,0.009,0.086l-3.857,2.834l4.647-1.133 c0.021,0.019,0.043,0.035,0.064,0.053l-0.077,2.82l1.747-2.203c0.029,0,0.057-0.007,0.086-0.009l2.834,3.857l-1.131-4.647 c0.019-0.021,0.034-0.043,0.053-0.063L20.698,18.71z M16,19c-1.104,0-2-0.896-2-2s0.896-2,2-2s2,0.896,2,2S17.104,19,16,19z" opacity="0.2"/><polygon fill="#EA3939" points="17,18 23.777,9.222 15,16 "/><polygon fill="#FFFFFF" points="15,16 8.221,24.777 17,18 "/></g><g/><g/><g/><g/><g/><g/></svg>
<svg enable-background="new 0 0 32 32" id="firefox" version="1.0" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M32,11.105c0,0.396-0.031,1.168-0.094,2.315c-0.063,1.146-0.198,2.273-0.406,3.379 c-0.209,1.105-0.594,2.346-1.156,3.723c-0.563,1.376-1.25,2.618-2.063,3.723c-0.812,1.104-1.927,2.148-3.343,3.128 c-1.417,0.979-3.021,1.68-4.812,2.096c-0.959,0.251-1.938,0.396-2.938,0.438c-0.041,0-0.124,0.021-0.249,0.062 c-0.835,0.041-1.667,0.041-2.5,0c-5.167-0.416-9.104-2.961-11.812-7.633c-1.25-2.212-1.96-4.317-2.125-6.319 c-0.125,0.584-0.21,1.085-0.25,1.501c-0.125-2.377,0.062-4.316,0.562-5.818C0.438,12.326,0.165,12.909,0,13.452 c0.333-1.877,0.771-3.358,1.312-4.442c0.04-0.25,0.29-0.71,0.75-1.376c0-0.084,0-0.146,0-0.188 C1.978,6.277,2.094,5.224,2.406,4.286s0.571-1.523,0.781-1.752c0.208-0.229,0.375-0.406,0.5-0.531 C3.728,3.003,4.25,3.962,5.25,4.88C5.5,4.921,5.728,4.943,5.938,4.943c1.04-0.209,2.125-0.188,3.25,0.062 c0.665-0.835,1.688-1.398,3.062-1.689l1.188-0.062c-1.21,0.709-1.938,1.73-2.188,3.065c0.458,0.959,1.062,1.439,1.812,1.439 c0.625,0,1.083,0,1.375,0c0.708,0,1.083,0.062,1.125,0.188v0.062v0.062c0.04,0.041,0.04,0.104,0,0.188v0.062v0.062 c-0.042,0.417-0.188,0.729-0.438,0.939c-0.042,0-0.062,0.01-0.062,0.031c0,0.021-0.022,0.031-0.062,0.031 c0,0.041-0.188,0.166-0.562,0.375c-0.5,0.333-0.897,0.604-1.188,0.813c-0.542,0.333-0.812,0.562-0.812,0.688v0.062h-0.062 c0.125,0.25,0.208,0.562,0.25,0.938c0.083,0.375,0.103,0.604,0.062,0.688c0,0.209,0,0.396,0,0.563c-0.5-0.25-0.979-0.417-1.438-0.5 c-0.585,0.25-0.917,0.521-1,0.812c-0.042,0.167-0.085,0.334-0.125,0.501c0,0.792,0.562,1.523,1.688,2.189 c0.458,0.292,0.927,0.46,1.406,0.501c0.478,0.042,0.853,0.021,1.125-0.062c0.271-0.084,0.603-0.209,1-0.376 c0.396-0.166,0.677-0.271,0.844-0.312c1.25-0.334,2.271-0.041,3.062,0.876c0.251,0.25,0.303,0.491,0.157,0.72 c-0.146,0.229-0.365,0.303-0.657,0.219c-0.124,0.041-0.208,0.053-0.249,0.031c-0.042-0.021-0.136,0-0.282,0.062 c-0.146,0.062-0.249,0.104-0.312,0.125c-0.063,0.021-0.167,0.084-0.312,0.188c-0.146,0.105-0.261,0.179-0.345,0.22 c-0.083,0.041-0.218,0.135-0.406,0.281c-0.188,0.146-0.343,0.24-0.468,0.281c-0.5,0.376-1.219,0.647-2.156,0.813 s-1.719,0.166-2.344,0c0.5,0.376,0.896,0.647,1.188,0.813c0.29,0.167,0.771,0.429,1.438,0.782c0.665,0.354,1.239,0.585,1.719,0.688 c0.478,0.104,1.083,0.156,1.812,0.156c0.729,0,1.396-0.125,2-0.376c0.604-0.25,1.249-0.677,1.938-1.282 c0.687-0.604,1.343-1.365,1.969-2.283c0.125-0.21,0.208-0.335,0.249-0.376c0.084,0-0.021,0.563-0.312,1.689 c-0.125,0.585-0.166,0.876-0.125,0.876c0.709-0.501,1.198-1.461,1.469-2.878c0.271-1.418,0.303-2.794,0.094-4.13 c0.5,0.209,0.854,0.604,1.062,1.189l0.126,0.125c0.249-0.793,0.396-1.825,0.438-3.098c0.041-1.272-0.084-2.325-0.375-3.159 c0.541,0.166,1.041,0.709,1.5,1.627c-0.125-0.668-0.313-1.283-0.562-1.846c-0.251-0.563-0.531-1.043-0.845-1.439 c-0.312-0.396-0.646-0.772-1-1.126c-0.354-0.354-0.718-0.647-1.093-0.876c-0.376-0.229-0.74-0.438-1.094-0.626 c-0.354-0.188-0.688-0.334-1-0.438c-0.313-0.104-0.595-0.188-0.844-0.25c-0.251-0.062-0.438-0.105-0.562-0.126 c-0.125-0.021-0.167-0.031-0.125-0.031c1.041-0.292,2.104-0.438,3.188-0.438C24,3.044,23.76,2.856,23.406,2.69 c-0.354-0.167-0.74-0.312-1.157-0.438c-0.416-0.125-0.822-0.229-1.218-0.312c-0.396-0.085-0.865-0.188-1.406-0.313h-0.062h0.124 c1.167-0.334,3-0.084,5.5,0.751c0.917,0.291,1.751,0.823,2.5,1.596c0.751,0.771,1.22,1.345,1.407,1.721 c0.187,0.375,0.322,0.688,0.406,0.938V6.381c0.041-0.209,0.01-0.531-0.094-0.97c-0.104-0.438-0.261-0.907-0.469-1.407 c0.041,0,0.104,0.031,0.188,0.094c0.083,0.062,0.239,0.291,0.469,0.688c0.229,0.396,0.489,0.97,0.78,1.72 c0.459,1.127,0.854,3.149,1.188,6.069l0.375-2.378C31.979,10.407,32,10.708,32,11.105z" fill="#EA7015"/></g><g/><g/><g/><g/><g/><g/></svg>
<svg enable-background="new 0 0 32 32" id="ie" version="1.0" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M11.466,18.942v0.064c0,1.051,0.24,2.06,0.725,3.022c0.569,1.008,1.349,1.806,2.336,2.397 c0.987,0.59,2.084,0.886,3.29,0.886s2.305-0.296,3.292-0.886c0.986-0.592,1.765-1.39,2.335-2.397h7.833 c-1.011,2.847-2.765,5.179-5.265,6.994c-2.502,1.817-5.311,2.726-8.425,2.726c-2.325,0-4.519-0.503-6.581-1.511 c-4.607,2.234-7.92,2.343-9.938,0.329c-0.703-0.656-1.053-1.751-1.053-3.284c0-1.532,0.296-3.24,0.889-5.123 c0.592-1.882,1.579-3.952,2.962-6.207c1.381-2.255,3.016-4.302,4.902-6.141c1.097-1.139,1.799-1.84,2.105-2.102 c-2.721,1.312-5.178,3.35-7.37,6.107c0.789-3.196,2.49-5.823,5.1-7.882c2.61-2.058,5.605-3.087,8.984-3.087 c0.351,0,0.701,0.022,1.052,0.065c2.458-1.095,4.695-1.707,6.714-1.839c2.018-0.132,3.443,0.197,4.277,0.985 c1.667,1.708,1.821,4.379,0.461,8.013C31.363,12.308,32,14.717,32,17.3c0,0.613-0.022,1.16-0.065,1.643h-7.767H11.466z M10.085,29.714c-2.939-1.795-5.003-4.312-6.188-7.554c-1.974,3.854-2.237,6.503-0.79,7.948 C4.38,31.378,6.705,31.246,10.085,29.714z M23.642,15.133c-0.088-1.577-0.724-2.923-1.908-4.04 c-1.185-1.116-2.578-1.675-4.179-1.675c-1.603,0-2.995,0.559-4.179,1.675c-1.186,1.117-1.822,2.463-1.91,4.04H23.642z M22.918,3.901c2.807,1.138,5.045,2.977,6.712,5.517c1.01-2.715,0.965-4.619-0.131-5.715C28.314,2.478,26.12,2.544,22.918,3.901z" fill="#188FD1"/></g><g/><g/><g/><g/><g/><g/></svg>
<svg enable-background="new 0 0 32 32" id="opera" version="1.0" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M26.737,4.375c2.842,2.917,4.264,6.75,4.264,11.5c0,4.334-1.422,8.104-4.264,11.312 C23.895,30.396,20.295,32,15.938,32c-4.316,0-7.885-1.604-10.706-4.812C2.41,23.979,1,20.209,1,15.875 c0-4.75,1.39-8.583,4.171-11.5C7.95,1.459,11.54,0,15.938,0C20.295,0,23.895,1.459,26.737,4.375z M21.291,11.062 c-0.124-1.291-0.373-2.552-0.747-3.781c-0.373-1.229-0.944-2.177-1.711-2.844c-0.769-0.666-1.733-1-2.895-1 c-1.162,0-2.116,0.323-2.863,0.969C12.328,5.053,11.778,6,11.426,7.25S10.835,9.75,10.71,11c-0.124,1.25-0.187,2.771-0.187,4.562 c0,1.125,0.021,2.073,0.062,2.844c0.04,0.771,0.113,1.709,0.218,2.812c0.103,1.104,0.27,2.031,0.498,2.781 c0.228,0.75,0.538,1.49,0.934,2.219c0.394,0.729,0.902,1.281,1.524,1.656s1.348,0.562,2.179,0.562c0.829,0,1.565-0.188,2.21-0.562 c0.643-0.375,1.161-0.927,1.556-1.656C20.098,25.49,20.42,24.75,20.669,24s0.436-1.677,0.56-2.781 c0.125-1.104,0.197-2.052,0.219-2.844c0.02-0.791,0.03-1.729,0.03-2.812C21.478,13.854,21.416,12.354,21.291,11.062z" fill="#EA3939"/></g><g/><g/><g/><g/><g/><g/></svg>
</div>
</div>
</div>
<div class="row mobile-info">
<div class="col-md-12">
<h2>mobile</h2>
<p><a href="https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/using_html5_audio_video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1" class="link">ios safari</a> has a bunch of quirks that restrict video playback, therefore the fallback is a video that loops, no custom controls</p>
<div class="row">
<div class="col-md-1">
<h4 class="no-top-mar">iphone & ipad</h4>
</div>
<div class="col-md-11">
<p>does not display dimensions of video properly (you'll get black bars) because video metadata is not loaded automatically</p>
<p>playback controls are not an option</p>
<p>autoplay not supported</p>
<p>allows only 1 video to be played at a time</p>
</div>
</div>
</div>
</div>
<hr>
<footer>
<div class="flexbox">
<a href="https://github.com/mattybow">
<div class="icon icon--github">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
</div>
</a>
<a href="https://twitter.com/dmthigh">
<div class="icon icon--twitter">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
</svg>
</div>
</a>
<a href="http://mattbow.com">mattybow</a>
</div>
</footer>
</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>