Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-elements   php

Repository URL to install this package:

Version: 2.5.6 

/ scss / addons / _jet-video.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;
Loading ...