How to load the player only when the poster frame is clicked

Loading the vzaar player takes a small amount of bandwidth - roughly 180Kb plus your poster frame. Normally this doesn't make much difference to your overall bandwidth usage, but if you have a high-traffic page or several videos embedded together then it can be worth delaying the load of the player till it's clicked.

In this example we'll use a simple jQuery function to load the iframe embed code when the image is clicked. We've used the vzaar poster frame in this example, but it would probably worth be creating your own image with a 'play' button overlaid to show the expected behavior.

In your HTML, add images for each video. It's essential that they have a class of .video and that the id matches that of the video:

 <img src="http://view.vzaar.com/918833/image" width="768" id="918833" class="video"/>
 <img src="http://view.vzaar.com/1142144/image" width="768" id="1142144" class="video"/>
 <img src="http://view.vzaar.com/1099183/image" width="768" id="1099183" class="video"/>


Then, add jQuery and the javascript to load the video player:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.video').click(function() {
      var videoId = $(this).attr('id');
      $(this).replaceWith(embed(videoId));
    });
  });
function embed(id) { embedCode = '<iframe allowFullScreen allowTransparency="true" class="video-player"' + 'frameborder="0" height="432" id="vzvd-'+ id + '" mozallowfullscreen' + 'name="vzvd-'+ id + '" src="http://view.vzaar.com/'+ id + '/player?autoplay=true"' + 'title="video player" type="text/html" webkitAllowFullScreen width="768"></iframe>'; return embedCode; } </script>

You'll probably also want to add img.video { cursor: pointer; } to your CSS so that the mouse behaves correctly, but apart from that this should all work as described.