Cacher is the code snippet organizer for pro developers

.video-popup { position: relative; width: calc(100% - 20px); max-width: 900px; box-sizing: border-box; margin: 0 auto; padding: 50px 0;
    .popup-body { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; background-color: #fff; }
    iframe {position: absolute; top: 0; left: 0; width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px; }
    .mfp-close { position: absolute; width: 40px; height: 40px; background-color: #62A744; opacity: 1; right: -40px; color: #fff; }
    .mfp-close:hover { background-color: #333F48; }
}

$('.play').magnificPopup({
type: 'inline',
    midClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
});

<div id="video-popup" class="white-popup mfp-hide video-popup">
    <div class="popup-body">
        <iframe src="https://www.youtube.com/embed/4CO_IGe1UD0" frameborder="0" allowfullscreen></iframe>
    </div><!-- END .popup-body -->
</div><!-- END #video-popup -->