@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-hero-video-player {
background-color: $primary;
background-image: url( '/wp-content/themes/british-esports/assets/images/gradients/gradient.svg' );
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
&:before {
width: 100%;
height: rfs-fluid-value( rem-calc(200) );
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(to top, rgba($primary, 0) 0%, $primary 100%);
}
&__video-row {
@include padding( rem-calc(60 0) );
}
&__video-col {
max-height: 90vh;
aspect-ratio: 1760/990;
position: relative;
overflow: hidden;
margin: 0 auto;
picture {
width: 100%;
aspect-ratio: 1920/1080;
}
video,
iframe {
width: 100%;
height: 100%;
position: relative;
transform: scale(1.01);
}
}
}
.single-post-article {
&:before,
&:after {
opacity: 0;
}
}
Animation: