.ytplayer-holder {
	position: relative;
	z-index: 0;

	.ytplayer-video {

		&--flex {
			position: relative;
			padding-bottom: 56.25%; /* 16:9 */
			height: 0;

			iframe {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	&.ytplayer-covered {

		.ytplayer-video {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}

		.ytplayer-cover {
			opacity: 1;
			position: relative;
			z-index: 20;
			visibility: visible;
			transition: opacity 0.3s ease, visibility 0s linear 0.3s;

			img {
				width: 100%;
			}
		}

		&.ytplayer-active {

			.ytplayer-cover {
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.3s ease, visibility 0s linear 0s;
			}
		}
	}

	&.ytplayer-fullwidth {
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
	}

	&.ytplayer-halfwidth {
		width: 50%;
	}

	.ytplayer-close {
		position: absolute;
		right: 25px;
		top: 0px;
		color: $color-white;
		cursor: pointer;
		padding: 10px;
		z-index: 5;

		.icon-reject {
			font-size: 10px;
			margin-left: 5px;

			&:before {
				line-height: 25px;
			}
		}
	}

	.ytplayer-close:hover {
		text-decoration: underline;
	}
}