<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <a class="popup-youtube" href="https://quickstartstyling.yodleeinteractive.com/finapp/10003600/?brand=4420000017&appId=1312d1123&callback=https://www.yodlee.com/&dataset=[{%22name%22%3A%22ACCT_PROFILE%22%2C%22attribute%22%3A[{%22name%22%3A%22FULL_ACCT_NUMBER%22%2C%22container%22%3A[%22bank%22]}]}%2C{%22name%22%3A%22BASIC_AGG_DATA%22%2C%22attribute%22%3A[{%22name%22%3A%22ACCOUNT_DETAILS%22%2C%22container%22%3A[%22bank%22%2C%22creditCard%22]}]}]&aggrAccountProfile=true">Open YouTube video</a><br> <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

.mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

$(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, //height:100%, fixedContentPos: false }); });