magnific popup youtube autoplay

index.html

<a href="https://www.youtube.com/watch?v=eOwswAHWDMA" class="popup">popup</a>

magnific-popup-youtube-autoplay.markdown

magnific popup youtube autoplay

A Pen by munees on CodePen.

License.

script.js

$('.popup').magnificPopup({
	type: 'iframe',
	mainClass: 'mfp-fade',
	removalDelay: 400,
	preloader: false,
	iframe: {
		patterns: {
			youtube: {
				index: 'youtube.com',
				id: 'v=',
				src: 'https://www.youtube.com/embed/%id%?rel=0&autoplay=1'
			}
		}
	},
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

style.css

/*
js popup
============================================================================
*/

.mfp-wrap {
	overflow-x: auto !important;
}
.mfp-container {
	min-width: 1300px;
}
.mfp-iframe-holder .mfp-content {
	max-width: 720px;
}

.mfp-iframe-holder .mfp-close {
	background: url(../img/btn_close.png) right 5px bottom 7px no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 0;
    opacity: 1;
}

/*-------------------------------
 *  animation
-------------------------------*/
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.10s ease;
	transition: all 0.10s ease;
}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.9;
}

.mfp-ready .mfp-content {
	width: 720px;
	-webkit-animation: tobig 0.5s ease 0s 1 normal both;
	animation: tobig 0.5s ease 0s 1 normal both;
}

@-webkit-keyframes tobig {
	from {
		width: 660px;
	}
	to {
		width: 720px;
	}
}

@keyframes tobig {
	from {
		width: 660px;
	}
	to {
		width: 720px;
	}
}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.30s ease-out;
	transition: all 0.30s ease-out;
}

.mfp-fade.mfp-bg.mfp-removing {
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />