-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (89 loc) · 5.08 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
<!DOCTYPE html><html lang='en' class=''>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23042579-10"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-23042579-10');
</script>
<style class="cp-pen-styles">* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
html { background: #000; font: normal 1em/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #fff; text-align: center; height: 100%; }
body { height: 100%; }
#video-viewport { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
video { display: block; width: 100%; height: auto; }
.fullsize-video-bg { height: 100%; overflow: hidden; }
.fullsize-video-bg:before { content: ""; background: rgba(114,45,0,.35); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.fullsize-video-bg:after { content: ""; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4RkZBQTgzNzg1NzExRTU4NTQyODc3OUM4MTZGMUREIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI4RkZBQTg0Nzg1NzExRTU4NTQyODc3OUM4MTZGMUREIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjhGRkFBODE3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjhGRkFBODI3ODU3MTFFNTg1NDI4Nzc5QzgxNkYxREQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz66uHInAAAAIUlEQVR42mL5//8/AyMj42YGIGBigABfEMEIkoEBgAADAKvuBwVS8BAjAAAAAElFTkSuQmCC); background-size: 3px 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.fullsize-video-bg .inner { display: table; width: 100%; max-width: 24em; height: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.fullsize-video-bg .inner > div { text-align: center; display: table-cell; vertical-align: middle; padding: 0 2em; }
h1 { font-family: "Raleway", sans-serif; font-size: 3em; line-height: .9; font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: .5em; }
h1 + p { font-family: "Shadows Into Light Two", cursive; font-size: 1.5em; }
.fab {
width: 150px;
height: 150px;
transition: all 0.1s ease-in-out;
font-size: 50px;
color: white;
text-align: center;
line-height: 70px;
position: fixed;
right: 50px;
bottom: 50px;
z-index:5;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.fab:hover {
transform: scale(1.05);
}
</style></head><body>
<section class="fullsize-video-bg">
<div class="inner">
<div>
<h1>Choo Choo</h1>
</div>
</div>
<div id="video-viewport">
<video id="choochoo" width="640" height="480" playsinline autoplay muted loop poster>
<source src="choochoo.mp4" type="video/mp4" />
<source src="choochoo.webm" type="video/webm" />
</video>
</div>
</section>
<img src="Speaker_Icon.svg" class="fab" onclick="toggleMute()">
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var min_w = 300;
var vid_w_orig;
var vid_h_orig;
$(function () {
vid_w_orig = parseInt($('video').attr('width'));
vid_h_orig = parseInt($('video').attr('height'));
$(window).resize(function () {fitVideo();});
$(window).trigger('resize');
});
function toggleMute() {
var video=document.getElementById("choochoo");
if(video.muted){
video.muted = false;
} else {
video.muted = true;
}
}
function fitVideo() {
$('#video-viewport').width($('.fullsize-video-bg').width());
$('#video-viewport').height($('.fullsize-video-bg').height());
var scale_h = $('.fullsize-video-bg').width() / vid_w_orig;
var scale_v = $('.fullsize-video-bg').height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
$('video').width(scale * vid_w_orig);
$('video').height(scale * vid_h_orig);
$('#video-viewport').scrollLeft(($('video').width() - $('.fullsize-video-bg').width()) / 2);
$('#video-viewport').scrollTop(($('video').height() - $('.fullsize-video-bg').height()) / 2);
};
//# sourceURL=pen.js
</script>
</body></html>