2
0

Some fixes to the CSS for videos.

This commit is contained in:
Maarten Billemont 2017-09-08 11:19:10 -04:00
parent f2abcc9e43
commit 33bf2c93d0
2 changed files with 11 additions and 10 deletions

View File

@ -201,9 +201,9 @@ header {
transition: height 0.3s; transition: height 0.3s;
} }
header .container { header .container {
position: relative; /*position: relative;*/
width: 100%; width: 100%;
height: 100%; /*height: 100%;*/
z-index: 1; z-index: 1;
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
@ -345,16 +345,17 @@ header .movie {
height: 100%; height: 100%;
padding-top: 40px; padding-top: 40px;
} }
header .movie::after { /*header .movie::before {
display: block; display: block;
content: " "; content: " ";
position: absolute; position: absolute;
z-index: -1;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: url('../img/loading-spin.svg') no-repeat scroll center center transparent; background: url('../img/loading-spin.svg') no-repeat scroll center center transparent;
} }*/
header.play { header.play {
height: auto !important; height: auto !important;
max-height: 94%; max-height: 94%;
@ -363,10 +364,10 @@ header.play .movie {
display: block; display: block;
} }
header.play .movie video { header.play .movie video {
position: relative; /*position: relative;
z-index: 3; z-index: 3;*/
} }
header.play h1, header.play h2, header.play .box { header.play .content, header.play .box {
display: none; display: none;
} }
header .moviecontrol { header .moviecontrol {
@ -396,7 +397,7 @@ header.play .moviecontrol {
header.play .moviecontrol::before { header.play .moviecontrol::before {
content: "❙❙"; content: "❙❙";
} }
header .movie::before { /*header .movie::before {
display: block; display: block;
content: " "; content: " ";
position: absolute; position: absolute;
@ -407,7 +408,7 @@ header .movie::before {
bottom: 0; bottom: 0;
background: url('../img/video-pattern.png') repeat; background: url('../img/video-pattern.png') repeat;
background: url('../img/video-bg.png') no-repeat scroll 50% 100%/cover transparent; background: url('../img/video-bg.png') no-repeat scroll 50% 100%/cover transparent;
} }*/
header .movie video { header .movie video {
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -59,7 +59,7 @@
<div class="container"> <div class="container">
<div class="movie"> <div class="movie">
<video> <video controls>
<source src="vid/about.webm" type="video/webm; codecs=vp8,vorbis"> <source src="vid/about.webm" type="video/webm; codecs=vp8,vorbis">
<source src="vid/about.mp4" type="video/mp4"> <source src="vid/about.mp4" type="video/mp4">
<source src="vid/about.ogv" type="video/ogg; codecs=theora,vorbis"> <source src="vid/about.ogv" type="video/ogg; codecs=theora,vorbis">