#Youtunes box pop up code
#Youtunes box pop up download

#Youtunes box pop up code

The APIД«y looking at Lity source code and documentation, I immediately knew that such library couldn't help me to achieve my final goal: the whole Youtube playing feature was a 'fire & forget' command, with no feedbacks provided by the HTML5 player. In the following sections I'll briefly explain how I was able to implement such feature, oping that this post will save other developers from losing that same amount of time. Unfortunately enough, this seemingly simple additional requirement took me a lot of time and efforts to implement. In order to make things perfect I just needed to find a way to shut down that lightbox right after the video ends. The only thing I really didn't like in my solution was the fact that, at the end of the video, the Youtube player was showing the typical 'other videos that you might like' dashboard, with a lot of other (mostly non-relevant) videos to click & see. and that was it! The Lightbox showed up beautifully and everything was working just like I wanted.

Add a reference to the JS and CSS files from the Lity's /dist/ folder to the HTML page:.

Implementing Lity was a matter of minutes I just had to perform the following steps:

#Youtunes box pop up download

The Lity JS library is available on GitHub (under MIT license), but you can also fetch it from its official website: however, I strongly suggest to get it from GitHub because the current 'stable' version - which is the one you'll get by clicking the official website's Download button - has an odd bug that will prevent the Youtube APIs from working properly (see The Hack section below for further details on this). In case you've never heard of it, a lightbox is basically a modal window that opens just like a popup over the HTML page, masking out the other content with a black (or white) background until you close it: that was precisely what I needed to achieve what I wanted! In order to achieve such result I've used Lity, a neat JS library that allows to embed a lot of iframe-based external contents (images, videos, maps, external URLs and so on) within a lightweight, accessible and responsive lightbox. If you want to take a look at it live, visit and see it in action! The Library

what we'll end up with at the end of the post. SPOILER: the above screenshot shows the end result, i.e.