videoInteraction a jQuery plugin

Submitted by matt_eaton on Mon, 08/04/2014 - 07:48 PM

Tags

jQuery

In the last three or four Drupal projects I have been involved with it seems that clients are requesting more and more video as part of their content. Video it seems has become so integrated with how we consume content that it is everywhere. Sites like Vimeo, YouTube, and Blip are readily available to stream embedded videos to our site with a simple piece of HTML.

As a developer though sometimes it can be a challenge to efficiently load a page when there is multiple embedded videos on one page. Anything more than one video seems like an unnecessary hit to performance. To try and curve this issue I wrote a small <a jQuery plugin that holds the iframe to the embedded video in memory and then when the user clicks on the image overlay, then an only then does the plugins load the video. The plugin is very small, but I have it up on my GitHub page here.

The code below provides a very simple example of three videos on a page that loads very quickly and when you click on the image overlay to play the video, then the video is loaded and presented to the user to play.

JavaScript:

(function($){
 
   //very quick plugin for swapping videos into a variable until you are ready for them
   $.fn.videoInteraction = function(){
        this.each(function(){
           //varibles
           var self = $(this),
           $image = self.parent().find('.image-overlay'),
           $video = self.find('iframe');
 
           //remove the video until we are ready for it
           $video.remove();
           //bind an event to the image overlay
           $image.on('click', handleVideoSwap);
           //this function hides the image overlay and starts the youtube player
           function handleVideoSwap(e){
              $(e.target).css('display', 'none');
              self.append($video);
           }
        });
    };
 
    $('.video-embed').videoInteraction();
 
}(jQuery));

CSS

body{
     	background-color:#f1f1f1;
}
 
.container{
	width:960px;
        margin:0 auto;
        background-color: #fff;
}
 
.video-container{
        width:640px;
        margin:40px auto;
        height:390px;
        position:relative;
}
 
.video-embed{
    position: absolute;;
        top:0;
}
 
.image-overlay{
        position: absolute;;
        top:0;
	cursor: pointer;
}

HTML

<!DOCTYPE html>
<html>
    <head>
       <title>Video Interaction</title>
       <link rel="stylesheet" href="style.css">
    </head>
    <body>
	<div class="container">
           <div class="video-container">
                   <div class="video-embed">
                          <iframe width="640" height="390" src="//www.youtube.com/embed/ZtIEGlRMelA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
                   </div>
                   <div class="image-overlay">
                          <img src="http://ea4e17cd9a5c172baab1-6da04ed897448c7f0c13c8592fe50e3e.r46.cf1.rackcdn.com/overlay-3.jpg" alt="Image Overlay" />
                   </div>
           </div>
           <div class="video-container">
                   <div class="video-embed">
                          <iframe width="640" height="390" src="//www.youtube.com/embed/S54_ZAHGNsc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
                   </div>
                   <div class="image-overlay">
                          <img src="http://ea4e17cd9a5c172baab1-6da04ed897448c7f0c13c8592fe50e3e.r46.cf1.rackcdn.com/overlay-3.jpg" alt="Image Overlay" />
                   </div>
           </div>
            <div class="video-container">
                   <div class="video-embed">
                          <iframe width="640" height="390" src="//www.youtube.com/embed/gxFtRdKr7CA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
                   </div>
                   <div class="image-overlay">
                          <img src="http://ea4e17cd9a5c172baab1-6da04ed897448c7f0c13c8592fe50e3e.r46.cf1.rackcdn.com/overlay-3.jpg" alt="Image Overlay" />
                   </div>
           </div>
        </div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Member for

3 years 9 months

Matt Eaton

Long time mobile team lead with a love for network engineering, security, IoT, oss, writing, wireless, and mobile. Avid runner and determined health nut living in the greater Chicagoland area.

Twitter

Github