webdeveloper123 Posted March 28, 2023 Share Posted March 28, 2023 (edited) Hi Guys, I am a very basic Javascript programmer & don't really know Jquery and I need some help. I want to create a link (to a youtube video) which when clicked will open it in a new window. Now I found this page on codepen (https://codepen.io/kliedLABS/pen/DWZoww) and it seems to do exactly what I am looking for. Trouble is I am having problems implementing it. Here is my code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Document </title> <link rel="stylesheet" href="magnific-popup.css"> </head> <body> <script src="jquery.magnific-popup.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.popup-youtube').magnificPopup({ type: 'iframe' }); }); </script> <div> <a class="popup-youtube" href="https://www.youtube.com/watch?v=Euy4Yu6B3nU">Air</a> </div> </body> </html> Am I missing something obvious like I haven't called the function? This is a link to the the Magnific site: https://dimsemenov.com/plugins/magnific-popup/ Many thanks Edited March 28, 2023 by webdeveloper123 Quote Link to comment Share on other sites More sharing options...
Solution gizmola Posted March 28, 2023 Solution Share Posted March 28, 2023 Yes you are missing something obviously different, which is that you are including jquery and the magnific popup code in the wrong order AND loading it in the body rather than the head section. Try changing it to this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Document </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="jquery.magnific-popup.js"></script> <link rel="stylesheet" href="magnific-popup.css"> <script> $(document).ready(function() { $('.popup-youtube').magnificPopup({ type: 'iframe' }); }); </script> </head> <body> <div> <a class="popup-youtube" href="https://www.youtube.com/watch?v=Euy4Yu6B3nU">Air</a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
webdeveloper123 Posted March 29, 2023 Author Share Posted March 29, 2023 Hey gizmola, Yes that's what was 90% of the problem. Thank you. The rest of the problem was that: 17 hours ago, gizmola said: <script src="jquery.magnific-popup.js"></script> Didn't contain the iframe functions. So I just used the build tool to generate the JS file and only included iframe. All done now Thanks! 1 Quote Link to comment Share on other sites More sharing options...
obojaiu Posted November 30, 2023 Share Posted November 30, 2023 Thanks for explanation Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.