.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; } .mejs-controls { height: auto; padding: 10px; align-items: center; background: #fff; .mejs-button, .mejs-time, .mejs-time-rail { width: auto; height: auto; } .mejs-button > button { position: relative; width: auto; height: auto; margin: 0; letter-spacing: normal; border: 1px none; border-radius: 0; background: none; font: normal normal normal 12px/1 FontAwesome; text-rendering: auto; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &:before { display: inline-block; width: 1em; } } .mejs-playpause-button > button { padding: 14px; color: #fff; background-color: #00B4FF; } .mejs-volume-button, .mejs-fullscreen-button { margin-left: 10px; } .mejs-volume-button > button { padding: 3px; color: #00B4FF; } .mejs-fullscreen-button > button { color: #00B4FF; &:before { content: '\f0b2'; @supports ( mask-image: none ) or ( -webkit-mask-image: none ) { content: ''; height: 1em; vertical-align: top; background-color: currentColor; mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M0 4.67188C0 4.78125 0.0273438 4.86328 0.0820312 4.91797C0.136719 4.97266 0.21875 5 0.328125 5H1.42188C1.50391 5 1.58594 4.97266 1.64062 4.91797C1.69531 4.86328 1.75 4.78125 1.75 4.67188V2.375H4.04688C4.12891 2.375 4.21094 2.34766 4.26562 2.29297C4.32031 2.23828 4.375 2.15625 4.375 2.04688V0.953125C4.375 0.871094 4.32031 0.789062 4.26562 0.734375C4.21094 0.679688 4.12891 0.625 4.04688 0.625H0.65625C0.464844 0.625 0.300781 0.707031 0.191406 0.816406C0.0546875 0.953125 0 1.11719 0 1.28125V4.67188ZM7.875 0.953125C7.875 0.871094 7.90234 0.789062 7.95703 0.734375C8.01172 0.679688 8.09375 0.625 8.20312 0.625H11.5938C11.7578 0.625 11.9219 0.707031 12.0586 0.816406C12.168 0.953125 12.25 1.11719 12.25 1.28125V4.67188C12.25 4.78125 12.1953 4.86328 12.1406 4.91797C12.0859 4.97266 12.0039 5 11.9219 5H10.8281C10.7188 5 10.6367 4.97266 10.582 4.91797C10.5273 4.86328 10.5 4.78125 10.5 4.67188V2.375H8.20312C8.09375 2.375 8.01172 2.34766 7.95703 2.29297C7.90234 2.23828 7.875 2.15625 7.875 2.04688V0.953125ZM11.9219 8.5C12.0039 8.5 12.0859 8.55469 12.1406 8.60938C12.1953 8.66406 12.25 8.74609 12.25 8.82812V12.2188C12.25 12.4102 12.168 12.5742 12.0586 12.6836C11.9219 12.8203 11.7578 12.875 11.5938 12.875H8.20312C8.09375 12.875 8.01172 12.8477 7.95703 12.793C7.90234 12.7383 7.875 12.6562 7.875 12.5469V11.4531C7.875 11.3711 7.90234 11.2891 7.95703 11.2344C8.01172 11.1797 8.09375 11.125 8.20312 11.125H10.5V8.82812C10.5 8.74609 10.5273 8.66406 10.582 8.60938C10.6367 8.55469 10.7188 8.5 10.8281 8.5H11.9219ZM4.375 12.5469C4.375 12.6562 4.32031 12.7383 4.26562 12.793C4.21094 12.8477 4.12891 12.875 4.04688 12.875H0.65625C0.464844 12.875 0.300781 12.8203 0.191406 12.6836C0.0546875 12.5742 0 12.4102 0 12.2188V8.82812C0 8.74609 0.0273438 8.66406 0.0820312 8.60938C0.136719 8.55469 0.21875 8.5 0.328125 8.5H1.42188C1.50391 8.5 1.58594 8.55469 1.64062 8.60938C1.69531 8.66406 1.75 8.74609 1.75 8.82812V11.125H4.04688C4.12891 11.125 4.21094 11.1797 4.26562 11.2344C4.32031 11.2891 4.375 11.3711 4.375 11.4531V12.5469Z'/%3E%3C/svg%3E"); } } } // Play-pause button icons .mejs-playpause-button.mejs-play > button:before { content: '\f04b'; } .mejs-playpause-button.mejs-pause > button:before { content: '\f04c'; } .mejs-playpause-button.mejs-replay > button:before { content: '\f0e2'; } // Volume button icons .mejs-volume-button.mejs-mute > button:before { content: '\f028'; } .mejs-volume-button.mejs-unmute > button:before { content: '\f026'; } .mejs-time { padding: 0; font-size: 14px; line-height: 1.5; font-weight: normal; color: #303865; } .mejs-currenttime, .mejs-duration { margin-left: 10px; } .mejs-currenttime ~ .mejs-duration { margin-left: 0; } .mejs-time-rail { padding: 0; margin: 0 0 0 10px; .mejs-time-total { position: relative; margin: 0; overflow: hidden; background: #EAEBF0; border-radius: 5px; } .mejs-time-current { width: 0; transform: scaleX(1) !important; background: #EA36A4; border-radius: 0 5px 5px 0; } .mejs-time-buffering, .mejs-time-loaded, .mejs-time-current, .mejs-time-hovered { height: 100%; } .mejs-time-buffering, .mejs-time-loaded { border-radius: 0; } .mejs-time-handle, .mejs-time-loaded, .mejs-time-hovered { display: none; } } .mejs-horizontal-volume-slider { width: auto; height: auto; margin-left: 7px; .mejs-horizontal-volume-total { position: relative; top: auto; width: 60px; height: 10px; border-radius: 5px; background: #EAEBF0; overflow: hidden; } .mejs-horizontal-volume-current { border-radius: 0 5px 5px 0; background: #00B4FF; } } .mejs-volume-slider { .mejs-volume-total { width: 4px; } } } } &--fa5-compat { .jet-video-mejs-player { .mejs-controls { .mejs-button > button { font: normal normal 900 12px/1 'Font Awesome 5 Free'; } } } } // For compatibility with Astra theme .ast-oembed-container { position: static; padding: 0; } }