Modal Video

PHP

<!-- Modal Button -->
<a href="#" class="button" data-modals="modal_video" data-src="https://www.youtube.com/embed/m5Ii2sNvvAw">Open Video</a>

<!-- modal_video.php -->
<iframe class="video_frame" src="<?=(isset($_POST["dataArray"]["src"]) ? $_POST["dataArray"]["src"] : '')?>?autoplay=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS

.modal_video.dialog{padding:3.5rem;border:none;max-width:65vw}
.modal_video.dialog .video_frame{width:100%;height:40rem}

@media only screen and (max-width: 992px) {
	.modal_video.dialog{padding:1rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem}
	.modal_video.dialog .icon_close{display:none}
}

@media only screen and (max-width: 767px) {
	.modal_video.dialog{max-width:90vw}
}

SCSS

.modal_video.dialog {
	padding: 3.5rem;
	border: none;
	max-width: 65vw;
	
	.video_frame {
		width: 100%;
		height: 40rem;
	}
}

@media only screen and (max-width: 992px) {
	.modal_video.dialog {padding: 1rem;border-radius: 1rem}
	.modal_video.dialog .icon_close {display: none}
}

@media only screen and (max-width: 767px) {
	.modal_video.dialog {max-width: 90vw}
}

JavaScript

case 'modal_video':
	var src = $(this).data('src');
	if (src !== '') {
		modalArray.src = src;
		$modalError = 0
	} else {
		$modalError++;
	}
	break;

if (type == 'modal_video') {
	function setHeight() {
		var target = $('body').find('iframe.video_frame');
		target.each(function () {
			var w = $(this).width(),
				h;
			
			if ($window.width() <= 767) {
				h = w / 1.7;
			} else if ($window.width() <= 992) {
				h = w / 1.2;
			} else if ($window.width() <= 1200) {
				h = w / .8;
			} else if ($window.width() <= 1500) {
				h = w / .7;
			} else {
				h = w / .5;
			}
			
			$(this).height(h);
		})
	}
	
	setHeight();
	
	$('.dialog').addClass('modal_video');
}