-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
123 lines (116 loc) · 10.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><responsive-video-background> Web Component</title>
<link rel="stylesheet" href="demo/page.css" />
<link rel="stylesheet" href="demo/demos.css" />
<link rel="icon" type="image/png" href="/brand/favicon.png" sizes="32x32" />
</head>
<body>
<div class="page">
<!-- prettier-ignore -->
<a class="clever-age-logo" href="https://www.clever-age.com/"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 495 206.7" width="287" height="120"><path fill="#403e46" d="M70 78.5c4.9 0 8.9-1.9 11.9-5.8l6.4 6.5c-5 5.7-11 8.5-17.8 8.5-6.8 0-12.5-2.2-16.9-6.5S47 71.4 47 64.8s2.3-12.1 6.8-16.5 10-6.6 16.6-6.6c7.3 0 13.4 2.8 18.3 8.3l-6.2 7c-3.1-3.9-7-5.8-11.7-5.8-3.7 0-6.9 1.2-9.6 3.7-2.6 2.4-4 5.7-4 9.9 0 4.1 1.2 7.4 3.7 9.9 2.5 2.6 5.5 3.8 9.1 3.8zm26.1 8.8V42.9h9.9v35.6h18.9v8.8H96.1zm68.2-44.4v8.8h-22.1v9.2h19.9v8.5h-19.9v9.1H165v8.8h-32.7V42.9h32zm25.9 28.3 11.3-28.3h10.7l-17.8 44.4H186l-17.9-44.4h10.7l11.4 28.3zm59.4-28.3v8.8h-22.2v9.2h19.9v8.5h-19.9v9.1h22.8v8.8h-32.7V42.9h32.1zm45.5 14.7c0 7.1-2.8 11.7-8.5 13.8l11.3 15.9h-12.2l-9.9-14.2h-6.9v14.2H259V42.9h16.8c6.9 0 11.8 1.2 14.8 3.5 3.1 2.3 4.5 6.1 4.5 11.2zm-11.9 5.3c1.2-1.1 1.8-2.8 1.8-5.2s-.6-4-1.9-4.9-3.5-1.3-6.7-1.3H269v13.2h7.2c3.4-.1 5.7-.7 7-1.8zm70.4 24.4-4.1-9.6h-18.6l-4.1 9.6h-10.6l19.2-44.4h9.6l19.2 44.4h-10.6zm-13.4-31.2L334.6 69h11.1l-5.5-12.9zm58 8.6h10v15.8c-4.4 4.9-10.5 7.4-18.3 7.4-6.5 0-12-2.2-16.4-6.5-4.4-4.3-6.6-9.8-6.6-16.4 0-6.6 2.3-12.1 6.8-16.5s10-6.6 16.3-6.6c6.4 0 11.9 2.1 16.6 6.3l-5.1 7.4c-2-1.7-3.8-2.9-5.5-3.6a14 14 0 0 0-5.4-1c-3.8 0-6.9 1.3-9.5 3.8-2.6 2.6-3.9 5.9-3.9 10.1s1.2 7.6 3.7 10.1 5.4 3.8 8.9 3.8c3.4 0 6.3-.7 8.6-2V64.7h-.2zM449 42.9v8.8h-22.1v9.2h19.9v8.5h-19.9v9.1h22.8v8.8H417V42.9h32zm-296.9 99v-12.6h2.1v1.9a4.2 4.2 0 0 1 3.8-2.2c1.9 0 3.2.8 3.8 2.3.4-.6 1-1.2 1.7-1.6.7-.5 1.5-.7 2.4-.7 1.2 0 2.2.4 3 1.1s1.2 1.8 1.2 3.1v8.7h-2.2v-8.4c0-.9-.2-1.6-.7-2-.5-.5-1-.7-1.7-.7-.9 0-1.6.4-2.2 1.2-.6.8-.9 1.8-.9 3.1v6.9h-2.2v-8.4c0-.9-.2-1.6-.7-2-.5-.5-1.1-.7-1.7-.7-.9 0-1.6.4-2.2 1.2-.6.8-.9 1.8-.9 3.1v6.9h-2.6zm34 0H184c-.2-.4-.3-1-.3-1.7-1.1 1.3-2.5 2-4.3 2-1.2 0-2.2-.3-3-1-.8-.7-1.2-1.5-1.2-2.6 0-2.9 2.8-4.3 8.4-4.3v-.8c0-.9-.2-1.6-.7-2.1-.5-.5-1.2-.8-2.1-.8-.9 0-1.6.2-2.1.7-.5.4-.7 1-.8 1.8l-2.2-.3c.1-1.2.7-2.2 1.7-2.8 1-.7 2.1-1 3.5-1 1.5 0 2.7.4 3.6 1.2.9.8 1.3 1.9 1.3 3.2v6.8c.1.6.2 1.2.3 1.7zm-6-1.4c1 0 1.8-.3 2.5-.9.7-.6 1.1-1.5 1.1-2.5V136c-4.1 0-6.1.9-6.1 2.6 0 .6.2 1.1.7 1.5.4.2 1 .4 1.8.4zm20.4 1.4-4.7-6.6-1.5 1.4v5.2H192v-18.7h2.2v11.1l5.4-5h2.6l-4.9 4.6 5.8 8h-2.6zm15.4-3.7 2 .8a5.5 5.5 0 0 1-5.2 3.2c-1.9 0-3.3-.6-4.4-1.9-1.1-1.2-1.6-2.8-1.6-4.8 0-1.9.5-3.5 1.6-4.7a5.6 5.6 0 0 1 4.3-1.9c1.8 0 3.2.6 4.2 1.8 1 1.2 1.5 2.7 1.5 4.5v.7H209c0 1.3.4 2.4 1 3.2.6.8 1.5 1.3 2.7 1.3.8 0 1.5-.2 2-.5s.8-.9 1.2-1.7zm-.9-6.5c-.6-.7-1.4-1-2.4-1s-1.8.3-2.4 1c-.6.7-1 1.5-1.1 2.6h7c-.2-1.1-.5-2-1.1-2.6zm16.6-6.9c0-.4.1-.8.4-1 .3-.3.6-.4 1.1-.4s.8.1 1.1.4c.3.3.4.6.4 1s-.1.7-.4 1c-.3.3-.6.4-1.1.4s-.8-.1-1.1-.4c-.3-.2-.4-.6-.4-1zm.3 17.1v-12.6h2.2v12.6h-2.2zm14.1-2 .7 1.8c-.6.3-1.3.5-2.3.5-1.1 0-1.9-.3-2.4-.9-.6-.6-.8-1.3-.8-2.2V131H239v-1.7h2.1v-3.6l2.2-1v4.6h2.9v1.7h-2.9v7.9c0 1 .4 1.4 1.3 1.4.5 0 1-.1 1.4-.4zm12.8-4.4c0-1 .2-2 .5-2.8.3-.8.8-1.5 1.3-2.1.6-.6 1.3-1 2.1-1.3a7.63 7.63 0 0 1 4.8-.2 4.81 4.81 0 0 1 2.7 2c.3.4.6.9.8 1.4l-3.5 1.3a2.2 2.2 0 0 0-2.2-2c-.5 0-.9.1-1.2.3-.3.2-.6.5-.8.9-.2.4-.3.8-.4 1.2-.1.4-.1.9-.1 1.4 0 .4 0 .9.1 1.3s.2.9.4 1.2c.2.4.5.7.8.9.3.2.7.3 1.2.3.6 0 1-.2 1.4-.5.3-.3.6-.8.8-1.3l3.6 1.3c-.3.5-.6.9-.9 1.3-.3.4-.7.8-1.2 1.1s-1 .6-1.6.7c-.6.2-1.3.3-2 .3-1 0-1.8-.2-2.7-.5-.8-.3-1.5-.7-2.1-1.3-.6-.6-1-1.3-1.3-2.1-.3-.8-.5-1.7-.5-2.8zm16.6-12.3h3.9v18.7h-3.9v-18.7zm20.9 16c-.5.9-1.3 1.7-2.2 2.2-1 .5-2.1.8-3.5.8-1 0-1.9-.2-2.7-.5-.8-.3-1.5-.8-2.1-1.3-.6-.6-1-1.3-1.3-2.1a8.21 8.21 0 0 1 0-5.6c.3-.8.8-1.5 1.3-2.1.6-.6 1.3-1 2-1.3.8-.3 1.6-.5 2.6-.5 1.1 0 2 .2 2.8.5.8.4 1.4.9 2 1.5a7.46 7.46 0 0 1 1.6 4.8v.9h-8.9c0 .4.1.7.2 1.1.1.3.2.7.4.9.2.3.5.5.8.7.3.2.7.3 1.2.3.7 0 1.2-.2 1.6-.5s.7-.7.9-1.1l3.3 1.3zm-5.9-7.7c-.8 0-1.4.2-1.8.7-.4.5-.7 1.1-.7 1.9h5c0-.9-.3-1.6-.7-2-.5-.4-1.1-.6-1.8-.6zm9.4-2.3h4.1c.4 1.3.8 2.6 1.1 3.7.2.5.3 1 .5 1.5.1.5.3 1 .4 1.5.1.5.3.9.4 1.3.1.4.2.7.3 1h.1c.1-.3.2-.6.3-1 .1-.4.2-.9.4-1.3.1-.5.3-1 .5-1.5s.3-1 .5-1.5c.3-1.2.7-2.4 1.1-3.7h3.8l-4.4 12.7h-4.4l-4.7-12.7zm29 10c-.5.9-1.3 1.7-2.2 2.2-1 .5-2.1.8-3.5.8-1 0-1.9-.2-2.7-.5-.8-.3-1.5-.8-2.1-1.3-.6-.6-1-1.3-1.3-2.1a8.21 8.21 0 0 1 0-5.6c.3-.8.8-1.5 1.3-2.1.6-.6 1.3-1 2-1.3.8-.3 1.6-.5 2.6-.5 1.1 0 2 .2 2.8.5.8.4 1.4.9 2 1.5a7.46 7.46 0 0 1 1.6 4.8v.9h-8.9c0 .4.1.7.2 1.1.1.3.2.7.4.9.2.3.5.5.8.7.3.2.7.3 1.2.3.7 0 1.2-.2 1.6-.5.4-.3.7-.7.9-1.1l3.3 1.3zm-5.9-7.7c-.8 0-1.4.2-1.8.7-.4.5-.7 1.1-.7 1.9h5c0-.9-.3-1.6-.7-2-.5-.4-1.1-.6-1.8-.6zm19.3 1.1c-.2-.2-.5-.3-.7-.3-.3-.1-.5-.1-.8-.1-.3 0-.6.1-1 .2s-.7.3-1 .6c-.3.3-.5.7-.7 1.2-.2.5-.3 1.1-.3 1.8v5.9h-3.9v-12.7h3.6v2.1c.4-.9.9-1.5 1.5-1.9a4.14 4.14 0 0 1 3.1-.5c.3 0 .6.1.8.2l-.6 3.5z"/><path fill="#ecb14d" d="M235.3 177.2c6.8 0 12.3 5.5 12.3 12.3 0-6.8 5.5-12.3 12.3-12.3-6.8 0-12.3-5.5-12.3-12.3.1 6.8-5.5 12.3-12.3 12.3z"/></svg></a>
<h1><code><responsive-video-background></code> Web Component</h1>
<p>
A Web Component that helps
<strong>responsively using a video as the background of a content block</strong>.
</p>
<p>
<a href="https://github.com/cleverage/responsive-video-background/"
><img
alt="GitHub release (latest by date)"
src="https://img.shields.io/github/v/release/cleverage/responsive-video-background?label=GitHub"
/></a>
<a href="https://www.npmjs.com/package/@cleverage/responsive-video-background"
><img alt="npm" src="https://img.shields.io/npm/v/@cleverage/responsive-video-background"
/></a>
<a href="https://www.npmjs.com/package/@cleverage/responsive-video-background"
><img alt="npm" src="https://img.shields.io/npm/dm/@cleverage/responsive-video-background"
/></a>
<a href="https://github.com/cleverage/responsive-video-background/blob/main/LICENSE"
><img
alt="GitHub license"
src="https://img.shields.io/github/license/cleverage/responsive-video-background"
/></a>
<a href="https://www.clever-age.com/"
><img
alt="Built by Clever Age"
src="https://img.shields.io/badge/Built%20by-Clever%20Age-223445?labelColor=98700e"
/></a>
</p>
<p class="github">
<a href="https://github.com/cleverage/responsive-video-background/">
View on github
<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</a>
</p>
<responsive-video-background
class="demo1"
webm="./demo/Big_Buck_Bunny_720_10s_1MB.webm"
mp4="./demo/Big_Buck_Bunny_720_10s_1MB.mp4"
poster="./demo/Big_Buck_Bunny_720.jpg"
fallback="https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1440&q=80"
srcset="https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=420&q=80 420w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=768&q=80 768w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1024&q=80 1024w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1440&q=80 1440w"
sizes="calc(100vh - 2rem)"
breakpoint="48rem"
>
<h1>A component with a responsive video background above 48rem viewport</h1>
<p>A paragraph of text</p>
<p>A second paragraph of text</p>
</responsive-video-background>
<responsive-video-background
class="demo2"
webm="./demo/Big_Buck_Bunny_720_10s_1MB.webm"
mp4="./demo/Big_Buck_Bunny_720_10s_1MB.mp4"
poster="./demo/Big_Buck_Bunny_720.jpg"
>
<div class="grid">
<h1>A dynamic width component with a video background</h1>
</div>
</responsive-video-background>
<responsive-video-background
class="demo3"
webm="./demo/Big_Buck_Bunny_720_10s_1MB.webm"
mp4="./demo/Big_Buck_Bunny_720_10s_1MB.mp4"
poster="./demo/Big_Buck_Bunny_720.jpg"
>
<div class="grid">
<h1>A small component with a video background</h1>
</div>
</responsive-video-background>
<responsive-video-background
class="demo4"
fallback="https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1440&q=80"
srcset="https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=420&q=80 420w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=768&q=80 768w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1024&q=80 1024w, https://images.unsplash.com/photo-1601629665203-f9f2b8d07019?auto=format&w=1440&q=80 1440w"
sizes="(min-width: 92rem) 90rem, calc(100vh - 2rem)"
>
<div class="grid">
<h1>A fixed height component with an image background</h1>
<p>Look here!</p>
</div>
</responsive-video-background>
<responsive-video-background
class="demo5"
webm="./demo/Big_Buck_Bunny_720_10s_1MB.webm"
mp4="./demo/Big_Buck_Bunny_720_10s_1MB.mp4"
>
<div class="grid">
<h1>A fluid height component with an image background</h1>
</div>
</responsive-video-background>
<p>
Videos from <a href="https://peach.blender.org/">Big Buck Bunny</a> (from Blender
Foundation) are made available in different sizes and formats on
<a href="https://test-videos.co.uk/">test-videos.co.uk</a>.
</p>
</div>
<script type="module" src="./responsive-video-background.js"></script>
</body>
</html>