I’ve been on several projects when I was asked to display Youtube videos on a webpage. Well, unless there is only one video on the page, and that video is loaded statically, you might need to leverage the Youtube API.
Every time I’ve placed a Youtube video on a page, its never as easy as slapping an IFRAME on the page. Sometimes the video loads dynamically, like when opening a modal window. Sometimes there is more than one video on the page, and you need to control the videos via javascript so that only one video plays at a time. Sometimes the web page being loaded needs to be as quick as possible, and therefore need to initialize videos on demand. To say to least, I almost always make use of the Youtube API to display videos on web pages.
I’ve posted a helper module to my Github account that abstracts the details of loading the API. The module encapsulates the code needed to load the API library asynchronously and also defines the required `onYouTubeIframeAPIReady` function that is called once the API is loaded and ready. The function fires an event from the body to notify other modules that the API is ready. Once the API is ready, modules can initialize players.
Default Usage
var ytHelper = new YoutubeHelper();
ytHelper.init(function() {
// DO SOMETHING ONCE API IS READY
});