.jet-video {
position: relative;
z-index: 1;
overflow: hidden;
background-color: #000;
&__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}
&--custom-bg {
z-index: 3;
}
}
&__play-button {
z-index: 5;
font-size: 80px;
line-height: 1;
text-align: center;
color: #fff;
cursor: pointer;
transition: .2s;
&-icon {
width: 1em;
vertical-align: top;
}
&-image {
width: 1em;
vertical-align: top;
svg {
width: 100%;
height: auto;
vertical-align: top;
}
}
// Play button animation
&--animation-grow {
transition-duration: .3s;
transition-property: transform;
.jet-video__overlay:hover & {
transform: scale(1.1);
}
}
&--animation-shrink {
transition-duration: .3s;
transition-property: transform;
.jet-video__overlay:hover & {
transform: scale(0.9);
}
}
&--animation-pulse {
.jet-video__overlay:hover & {
animation-name: elementor-animation-pulse;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
&--animation-pulse-grow {
.jet-video__overlay:hover & {
animation-name: elementor-animation-pulse-grow;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
&--animation-pulse-shrink {
.jet-video__overlay:hover & {
animation-name: elementor-animation-pulse-shrink;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
&--animation-push {
.jet-video__overlay:hover & {
animation-name: elementor-animation-push;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
}
&--animation-pop {
.jet-video__overlay:hover & {
animation-name: elementor-animation-pop;
animation-duration: .3s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
}
&--animation-bounce-in {
transition-duration: .5s;
.jet-video__overlay:hover & {
transform: scale(1.2);
transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
}
}
&--animation-bounce-out {
transition-duration: .5s;
.jet-video__overlay:hover & {
transform: scale(0.8);
transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
}
}
&--animation-rotate {
transition-duration: .3s;
transition-property: transform;
.jet-video__overlay:hover & {
transform: rotate(4deg);
}
}
&--animation-grow-rotate {
transition-duration: .3s;
transition-property: transform;
.jet-video__overlay:hover & {
transform: scale(1.1) rotate(4deg);
}
}
&--animation-float {
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;
.jet-video__overlay:hover & {
transform: translateY(-8px);
}
}
&--animation-sink {
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;
.jet-video__overlay:hover & {
transform: translateY(8px);
}
}
&--animation-bob {
.jet-video__overlay:hover & {
animation-name: elementor-animation-bob-float, elementor-animation-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
}
}
&--animation-hang {
.jet-video__overlay:hover & {
animation-name: elementor-animation-hang-sink, elementor-animation-hang;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
}
}
&--animation-skew {
transition-duration: .3s;
transition-property: transform;
.jet-video__overlay:hover & {
transform: skew(-10deg);
}
}
&--animation-skew-forward {
transition-duration: .3s;
transition-property: transform;
transform-origin: 0 100%;
.jet-video__overlay:hover & {
transform: skew(-10deg);
}
}
&--animation-skew-backward {
transition-duration: .3s;
transition-property: transform;
transform-origin: 0 100%;
.jet-video__overlay:hover & {
transform: skew(10deg);
}
}
&--animation-wobble-vertical {
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-horizontal {
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-horizontal;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-to-bottom-right {
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-to-top-right {
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-top {
transform-origin: 0 100%;
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-top;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-bottom {
transform-origin: 100% 0;
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-bottom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-wobble-skew {
.jet-video__overlay:hover & {
animation-name: elementor-animation-wobble-skew;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
&--animation-buzz {
.jet-video__overlay:hover & {
animation-name: elementor-animation-buzz;
animation-duration: .15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
&--animation-buzz-out {
.jet-video__overlay:hover & {
animation-name: elementor-animation-buzz-out;
animation-duration: .75s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
}
}
&.jet-video-aspect-ratio {
&--16-9 { padding-bottom: 56.25%; }
&--21-9 { padding-bottom: 42.8571%; }
&--9-16 { padding-bottom: 177.77%; }
&--4-3 { padding-bottom: 75%; }
&--3-2 { padding-bottom: 66.6666%; }
&--1-1 { padding-bottom: 100%; }
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border: none;
}
}
.jet-video-html5-player,
.mejs-mediaelement video.jet-video-mejs-player {
object-fit: cover; // for poster size - cover
}
> video.jet-video-mejs-player {
opacity: 0; // prevent blinking on load
}
.jet-video-html5-player {
display: block;
}
.jet-video-mejs-player {
&.mejs-container {
font-family: inherit;
background: none;
}
&.jet-video-custom-play-button {
.mejs-overlay-play .mejs-overlay-button {
display: none;
}
}
.mejs-overlay-loading {
display: none;
Loading ...