.mon-yt-facade {
	position: relative;
	width: 100%;
	background: #000;
	cursor: pointer;
}

/* Inside WPBakery's video widget the ratio box already exists:
   .wpb_video_wrapper has the padding-top intrinsic-ratio hack and expects its
   iframe to fill it absolutely. Let the facade do exactly that instead of
   adding its own ratio box below the padding (which doubled the height).
   !important: the facade carries its standalone ratio/width as inline style. */
.wpb_video_wrapper .mon-yt-facade {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto !important;
	max-width: none !important;
}

.mon-yt-facade img,
.mon-yt-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}

.mon-yt-facade img {
	object-fit: cover;
}

.mon-yt-facade-title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 12px 36px;
	background: linear-gradient(rgba(0, 0, 0, .65), transparent);
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	pointer-events: none;
}

.mon-yt-facade-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.mon-yt-facade-btn svg {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
	opacity: .9;
	transition: opacity .15s;
}

.mon-yt-facade:hover .mon-yt-facade-btn svg,
.mon-yt-facade-btn:focus svg {
	opacity: 1;
}