<form class="on-center" action="">
	<input data-close type="radio" name="toggle" id="close">
	<label for="close">Close</label>
	<a href="#" class="one"></a>

	<input data-open type="radio" name="toggle" id="open">
	<label for="open">Open</label>
	<a href="#" class="two">
		
		<video id="Stage_16_extended_video" preload="auto" muted src="//cdn.ad.citynews.it/masthead/2021/06/regione-umbria_video/media/video.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
	</a>
	
</form>
.one {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('https://images.unsplash.com/photo-1620161970885-8e94d202a89d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80'), linear-gradient( #061a34, #071b3c, #152748);
	height: 30vh;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

.two {
	background-image: url('https://images.unsplash.com/photo-1617062004315-a7c65e9015c8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2251&q=80'), linear-gradient( #d29607, #d3920b, #dba924);
	
	@media all and (max-width: 736px) {
		background-image: url('https://images.unsplash.com/photo-1617061998343-232de1f6fa62?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEwfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60'), linear-gradient( #d29607, #d3920b, #dba924);
	}
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 90vh;
	z-index: 3;
	display: flex;
	
	.on-center & {
		justify-content: center;
	}
	.on-right & {
		justify-content: end;
	}
}

input[type="radio"] {
	opacity: 0;
	
	&[data-close] {
		z-index: 4;
	}
	&[data-open] {
		z-index: 2;
	}
}

[data-close]:checked {
	display: none;
	
	~ .two {
		height: 0px;
		opacity: 0;
		transition: height .6s ease-in-out, opacity 3s ease-in-out;
	}
	
	+ label{
		display: none;
	}
}

[data-open]:checked {

	~ .two {
		opacity: 1;
		height: 90vh;
		transition: height .6s ease-in-out, opacity .6s ease-in-out;
	}
}

label {
	color: white;
	position: absolute;
	cursor: pointer;
	top: 1rem;
	right: 1rem;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
	
	[data-open] + & {
		z-index: 2;
	}
	
	[data-close] + & {
		z-index: 4;
	}
}

form {
	position: relative;
}

video {
	position: absolute; 
	margin: 0px; 
	opacity: 1;
	width: auto; 
	height: 100%; 
	display: block; 
	display: none;
	
	.with-video &{
		display: block;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.