@gravityforms/components/css/admin/videos/video.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-video__wrapper {
		position: relative;

		.gform-button--video-play {
			border-radius: 0.75rem;
			height: 5.063rem;
			justify-content: center;
			outline: 8px solid rgba(0, 0, 0, 0.1);
			width: 8.188rem;

			.gform-button__icon {
				font-size: 2.625rem;
			}

			&:hover {
				filter: drop-shadow(0 1px 3px rgba(18, 25, 97, 0.1)) drop-shadow(0 1px 2px rgba(18, 25, 97, 0.06));
			}

			&:focus {
				outline-color: #dde9fc;
			}
		}
	}

	.gform-video__placeholder {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 1;
		transition: opacity 600ms;

		.gform-video__placeholder-inner {
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	.gform-video__wrapper--playing {

		.gform-video__placeholder {
			opacity: 0;
		}
	}

	.gform-video__wrapper--revealed {

		.gform-video__placeholder {
			display: none;
		}
	}

	.gform-video__wrapper--has-ratio {

		.gform-video__placeholder,
		.gform-video {
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 3;
		}
	}

	.gform-video__wrapper--has-placeholder {

		.gform-video {
			opacity: 0;
			transition: opacity 600ms;
			z-index: 2;
		}

		&.gform-video__wrapper--playing .gform-video {
			opacity: 1;
		}
	}
}