49 lines
820 B
SCSS
49 lines
820 B
SCSS
/*
|
|
* Video
|
|
* Video Object, with general fallbacks and smarter controls for better
|
|
* cross-browser compatibility.
|
|
*
|
|
* Also allows for better and more styled controls.
|
|
*
|
|
* Dependencies:
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/05/07
|
|
*/
|
|
%o-video__media-cover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit:cover;
|
|
}
|
|
|
|
$o-video__fallback-z: 0;
|
|
$o-video__video-z: 1;
|
|
$o-video__loader-z: 2;
|
|
|
|
.o-video {
|
|
position: relative;
|
|
|
|
&__video {
|
|
width: 100%;
|
|
position: relative;//Needed by some browser to allow the Z-Index to apply
|
|
z-index: $o-video__video-z;
|
|
|
|
&.is-full {
|
|
@extend %o-video__media-cover;
|
|
|
|
}
|
|
}
|
|
|
|
&__image {
|
|
@extend %o-video__media-cover;
|
|
z-index: $o-video__fallback-z;
|
|
}
|
|
|
|
&__loader {
|
|
z-index: $o-video__loader-z;
|
|
}
|
|
}
|