Now that we've covered the basic image functionality for Fancybox, let's load a video from YouTube. Fancybox makes it easy to load any YouTube video in a pop-up window.
To start things off, we need to find a video we want to display. Go to YouTube and pick any video you like. We need to find the embed URL that YouTube provides.
On the YouTube page, for the video you want to use, click on the Share tab as shown in the following screenshot:
Next, click on the Embed link. A box will show up with some HTML code for an iframe tag as shown in the following screenshot:
Note
Lastly, copy src of iframe. This is the embed link that we will use to show our video. Note that the protocol (http or https) may be left out of the iframe source. If no protocol is present inside the src attribute of the iframe tag, you will need to add it. Now that we have the source of our video, we can load it in Fancybox. Because we are using YouTube for our video, the entire YouTube API can be used in our embed URL. For the embed API see https://developers.google.com/youtube/player_parameters.
Create an anchor tag with a class of
show-popup:<a class="show-popup">Wringing out Water on the ISS</a>
Add the
hrefattribute and put the embed URL from the video that you selected as the value:<a class="show-popup" href="http://www.youtube.com/embed/o8TssbmY-GM"> Wringing out Water on the ISS</a>
Add the
fancybox.iframeclass to the anchor tag:<a class="show-popup fancybox.iframe" href="http://www.youtube.com/embed/o8TssbmY-GM"> Wringing out Water on the ISS</a>
Change the
scripts.jsfile so that Fancybox is called on theshow-popupclass instead of thefancyboxclass:$('.show-popup').fancybox();You should see your video loaded in Fancybox as shown in the following screenshot:
There are two key advantages of using Fancybox to display YouTube videos. First, Fancybox is doing all of the additional work to load the embedded iframe on the page for us. Second, Fancybox needs to be told that it is loading content into an iframe. This is what the fancybox.iframe class does.
Note
YouTube allows us to load videos via secure (https) or nonsecure (http) connections. If you need to load the video on a secure page, make sure the href attribute is using https.
Once Fancybox is told that it needs to load the content as the iframe type, it will construct an iframe to load the URL provided in the href attribute. Fancybox also adds a handful of necessary attributes to the constructed iframe. The necessary attributes are ID, name, and class, which allow Fancybox to identify the iframe.
Other attributes of particular interest are frameborder="0" and allowfullscreen. The frameborder attribute tells iframe not to have any border. The allowfullscreen attribute (as well as the webkitallowfullscreen and mozallowfullscreen attributes) allows a method to be called from JavaScript to expand the iframe to 100 percent of the screen. This functionality is only supported in modern browsers. If you are interested in learning more about putting iframes into fullscreen mode, visit the Mozilla Developer Network page on the subject: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode. There are also two attributes that are no longer used in many browsers, vspace and hspace, but are used to support older browsers.
Because we are working with external content, there is not a lot more that we can do in addition to the standard functionality of Fancybox. However, there are some other ways to tell Fancybox what to do with the content that we want to load. We can also leverage the YouTube API to provide a thumbnail for our video.
There are other ways to tell Fancybox that we are going to load the iframe content as well. One of the other options is to add another attribute to the anchor tag, data-fancybox-type. For our link, we will use the following code:
<a class="show-popup" data-fancybox-type="iframe" href="http://www.youtube.com/embed/o8TssbmY-GM">Wringing out Water on the ISS</a>
The third option is to set the content type via a setting. Settings are passed to Fancybox via a JavaScript object. For our link, we would need to remove the data-fancybox-type attribute from the anchor tag so it looks like the following code:
<a class="show-popup" href="http://www.youtube.com/embed/o8TssbmY-GM">Wringing out Water on the ISS</a>
We would also need to modify our scripts.js file, so that we pass the type setting to Fancybox as follows:
$(".show-popup").fancybox({type: "iframe"});In the given code, we have set the type setting to be "iframe". The type setting will override any other way we have set the content type to be loaded, so it should only be used when absolutely necessary. The best solution is to use the data-fancybox-type attribute, since it allows us to be fairly semantic (our HTML describes what it is going to do) and doesn't cause trouble with other calls to Fancybox.
For example, if we wanted to keep our image gallery on the page, we can keep our call to Fancybox the same for both the gallery and the video, as long as we set the type setting using the data-fancybox-type attribute or the class. If we used the setting, all of the images would be loaded as iframes, which stops Fancybox from shrinking our images to fit inside the pop up. It also stops us from accessing any of the content inside the Fancybox pop up using JavaScript because browsers treat iframes as separate pages from the main document.
Adding a thumbnail for the video is very easy. We'll use the YouTube API to get a video thumbnail and add it to the page. YouTube provides access to four thumbnail images for any video. To make things simple, we'll just use the default image. The basic thumbnail URL looks like http://img.youtube.com/vi/<video-id>/default.jpg.
This URL is the default structure for any thumbnail from YouTube. We can replace default.jpg with 0.jpg, 1.jpg, 2.jpg, 3.jpg, hqdefault.jpg, mqdefault.jpg, or maxresdefault.jpg to load different thumbnails. For the video used in the demo, the video ID is o8TssbmY-GM, so the URL for the default thumbnail will be http://img.youtube.com/vi/o8TssbmY-GM/default.jpg. Now, we can just add this as an img tag inside our link to the video as follows:
<a class="show-popup" data-fancybox-type="iframe" href="http://www.youtube.com/embed/o8TssbmY-GM"><img src="http://img.youtube.com/vi/o8TssbmY-GM/default.jpg"></a>
We now have a thumbnail for our video that can be clicked on and the video loads in Fancybox.