It seems like you are trying to create a video pop-up gallery on your webpage. There are several ways to achieve this. One way is to use a plugin like WP Video Popup. Another way is to use a video lightbox. You can also create a responsive popup video gallery using HTML CSS and Vanilla Javascript. However, since you mentioned that the pop-up effect works fine when you test the code on codepen.io itself, it might be an issue with your codepen settings panel. You can try checking if you have added the correct CDN link to your codepen.io settings panel and if it is working properly. I hope this helps! Let me know if you have any other questions.

It looks like you have included the necessary libraries in your section, but there may be an issue with your videogallery.js file or the way you are using it in your code. Without seeing the full code, it's hard to determine the exact issue. However, since you mentioned that it works in Codepen, you can try to compare your local code with the Codepen code to see if there are any differences. Additionally, you can also try to check the console for any error messages that may help identify the issue. One common issue could be that the file path for videogallery.js is incorrect, so double-check that as well. As for creating a pop-up when clicking on a video, you can use the Magnific Popup library that you have already included in your . You can find the documentation and examples for how to use the library on their website here: https://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type. In short, you will need to add the data-mfp-src attribute to your video link element, and then initialize the Magnific Popup with the appropriate options in your videogallery.js file. Again, please refer to the library documentation and examples for more detailed instructions.