// // Video //
.video-js {
@extend %floating; @include border-radius; position: absolute; width: 100% !important; height: 100% !important; left: 0; top: 0; z-index: 50; background: transparent;
}
.video-3-4 {
position: relative; width: 100%; height: 0; padding-bottom: 42.6%;
}
.video-16-9 {
position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;
}
.youtube {
.vjs-control-bar { display: none; }
}
.video-js .vjs-big-play-button {
top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; line-height: 80px; font-size:40px; background: none; color: $white; border: 0; z-index: 5; @include transition(); &::before { @include transition(); position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; display: block; width: 80px; height: 80px; line-height: 80px; text-align: center; cursor: pointer; border: 2px solid $white; content: ""; font-size: 20px; color: $canalplus; border-radius: 50%; }
}
.video-js:hover .vjs-big-play-button {
background: none; &::before { @include scale(1.2); }
}
// Background Video .jquery-background-video-wrapper {
@include prefix(background-size, cover, webkit moz); position: relative; overflow: hidden; background-position: center center; background-repeat: no-repeat;
} .jquery-background-video {
@include prefix(object-fit, contain, o); position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; top: 0; left: 0;
} /**
* Fade in videos * Note the .js class - so non js users still * see the video */
.js .video-bg video {
opacity: 0;
} .js .video-bg video.is-playing {
opacity: 1;
}