Time for action – showing a video in a lightbox

Follow these steps to set up Colorbox to play a set of videos:

1. We'll get started as we usually do, by setting up a basic HTML file and the associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. In the body of our HTML document, we're going to include a link to a YouTube video:

   <p>
     <a href="http://www.youtube.com/embed/wsRk0TXYXuA?autoplay=1" id="video-link">Watch the video</a>
   </p>

   Note a couple of things about my video link. First, I'm using the embed URL for the video rather than the link to YouTube's video page. For users without JavaScript enabled, this will take them to a standalone video player page on YouTube's site. For users with JavaScript enabled, it will ensure that only the video player is loaded into the Colorbox rather than the full YouTube video page. Second, I'm adding a parameter to the URL for the video, setting autoplay to 1. This is how you can make embedded YouTube videos...