Padded modal with fixed ratio content

by Chris Ball

HTML

<div class="modal">
	<div class="modal__limit-height">
		<div class="modal__limit-width">
			<div class="video">
				<iframe src="" frameborder="0"></iframe>
			</div>
			<p>lorem</p>
			<p>ipsum</p>
		</div>
	</div>
</div>

<div id="toggle"></div>

SCSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	position: relative;
}

#toggle {
	background: yellow;
	display: block;
	height: 80px;
	position: absolute;
	right: 0;
	top: 0;
	width: 80px;
	z-index: 100;
}

.modal {
	background: lightblue;
	height: 100vh;
	width: 100vw;
	position: relative;
}

.modal__limit-height {
	margin: 0 auto;
	left: 50%;
	max-width: calc( 177vh - 284px );
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 100%;
}

.modal__limit-width {
	margin: 0 auto;
	max-width: calc( 100vw - 160px );
}

.video {
	background: rebeccapurple;
	margin: 0 auto;
	padding-top: 56.25%;
	position: relative;
	width: 100%;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
}

JavaScript

$('#toggle').on('click', function () {
	let modal = $('.modal')
	if( !modal.is(":visible") ) {
		let src = 'https://player.vimeo.com/video/186396355'
		$('.video').find('iframe').attr('src', src)
	} else {
		$('.video').find('iframe').attr('src', '')
	}
	$('.modal').fadeToggle(300);
})