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 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/2_HXUhShhmY?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 stand-alone 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 automatically play when the site visitor views your page. It's generally a bad idea to have a video autoplay, but in this case, the user will have already clicked a link that says Watch the video, so it seems like a safe bet that they'll be expecting a video to play once they've clicked that link.

  2. Next, just as with the other Colorbox examples so far, you'll need to attach your chosen Colorbox skin CSS file in the head of your document, make sure the images are available, update the path to the images in the CSS if necessary, and finally attach the Colorbox plugin in the foot of the document.
  3. Now, we'll open up our scripts.js file and get set to write up our custom JavaScript. We'll get started with the document ready statement:
    $(document).ready(function(){
});
  4. Next, we'll select the video link and call the colorbox() method:
    $(document).ready(function(){
$('#video-link').colorbox();
});

    But if we refresh the page in a browser and attempt to view the video, we get an error. That's because we're attempting to load in the video via Ajax, and because of browser security restrictions, we can't make asynchronous requests to a different server. In this case, we're trying to make a call to http://youtube.com, but that's not where our Colorbox page is hosted, so the browser blocks our request.

  5. Luckily, we can create an iframe and load our external content into the iframe. And also luckily, Colorbox provides a way for us to do so easily. We'll just pass a key/value pair to the colorbox() method setting iframe to true like the following:
    $('#video-link').colorbox({
iframe: true
});

    Now our video loads into the Colorbox, but the Colorbox has no idea how large our video can be, so we can't see it.

  6. We'll have to tell Colorbox how big we expect our video player to be. We'll do this by passing in key/value pairs for the innerWidth and innerHeight. We're using innerWidth and innerHeight rather than width and height in this case because we're passing in how large we want the video player (or content) to be, rather than how large we want the Colorbox to be:
    $('#video-link').colorbox({
iframe: true,
innerWidth: '640px',
innerHeight: '480px'
});
  7. We can also use the Colorbox to create a way for users to easily view several videos. Let's go back into index.html and add a list of favorite videos to our page instead of just one link to a video. We'll use a rel attribute set to favorites for each one and provide a title attribute so our videos will display a caption underneath:
    <h3>Favorite Videos</h3>
<ul>
<li><a href="http://www.youtube.com/embed/itn8TwFCO4M?autoplay=1" rel="favorites" title="Louis CK and Everything is Amazing">Everything is Amazing</a></li>
<li><a href="http://www.youtube.com/embed/UN0A6h9Wc5c?autoplay=1" rel="favorites" title="All This Beauty by The Weepies">All This Beauty</a></li>
<li><a href="http://www.youtube.com/embed/ZWtZA-ZmOAM?autoplay=1" rel="favorites" title="ABC's That's Incredible">That's Incredible</a></li>
</ul>
  8. The only update we have to make to our JavaScript in scripts.js is to update the selector. Instead of selecting one single link by ID, we're going to select our set of favorites links by their rel attribute:
    $('a[rel="favorites"]').colorbox({
iframe:true,
innerWidth:'640px',
innerHeight: '480px'
})

    If you view the page in the browser, you'll see that you have a caption under the video and next and previous buttons that allow you to navigate between the videos without closing the Colorbox.

  9. The only thing that's a bit awkward is that our pagination indicator says Image 1 of 3 when we're showing videos, not images. Luckily, Colorbox provides a way for us to customize this text with the current key:
    $('a[rel="favorites"]').colorbox({
iframe:true,
innerWidth:'640px',
innerHeight: '480px',
current: 'Video {current} of {total}'
})

    Now, our pagination indicator correctly reads Video 1 of 3. Our site visitors can easily move from video to video without having to close the Colorbox and each video displays a caption:

    Time for action — showing a video in a lightbox

What just happened?

We learned how to create both a stand-alone video player and a multiple video player inside a Colorbox. We learned how to pass in key/value pairs to tell the Colorbox to load in external content in an iframe, working around cross-domain Ajax restrictions. We also learned how to modify the pagination indicator text to fit our current content type. We used the innerWidth and innerHeight keys to set the video player's size.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.144.170