mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-24 05:43:25 +02:00
Code Issues Releases Wiki Activity

Responsive background video

Browse Source
This commit is contained in:
José Luis Antúnez
2017-03-31 20:38:10 +02:00
committed by GitHub
parent 2c96d440e3
commit d2bb7fa254
1 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/base.css
View File

@@ -692,7 +692,7 @@ footer,
.embed iframe, .embed iframe,
.embed object, .embed object,
.embed embed { .embed embed,.embed video {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -700,6 +700,51 @@ footer,
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
/* -- Responsive background video
https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed {
position: fixed;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-bottom: 0;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
.fullscreen > .embed > iframe,
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
.fullscreen > .embed > video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen > .embed > iframe,
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
.fullscreen > .embed > video {
width: 300%;
left: -100%;
}
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
.fullscreen > .embed > iframe,
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
.fullscreen > .embed > video {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
/*=== Browser (Screenshots) ================ */ /*=== Browser (Screenshots) ================ */