525 lines
13 KiB
SCSS
525 lines
13 KiB
SCSS
.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;
|
|
}
|
|
}
|