Lightbox effect made easy with litty
So you want to make a webpage that when you click a button, a youtube video frame will overlay the current windows instead of opening in a new screen. Lightbox effect is what you want to achieve. But it sounds like something fancy and would take a lot of javascript-fu to implement it. Fortunately, we have Lity . Official website: http://sorgalla.com/lity/ Here is how to use it: 1. Download the distribute package of litty from github . You only need 2 files: lity.js and lity.css from the dist directory. 2. Include the library in your web page (and jQuery): <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> 3. Add data-lity to your link tag: <a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube</a> 4. Bind the click event: $(document).on('click', '[data-my-lightbox]', lity); Awesome!!!