// // 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;

}