SublimeVideo

Customizing the initial play button

The default initial play button ensures compatibility across all browsers (down to IE6). We strongly discourage you from modifying it using CSS.

However, you are completely free to use your own custom image (<img> or any other DOM element) to recreate a different initial play button and then use our JavaScript API to prepare and play the video (which is initially hidden) as soon as the user clicks the new play button.

In the example below we’ll use a simple <img> element as a custom play button, but you could use a <div> or any other DOM element.

HTML Code

<img id="posterframe_video1" class="custom_play_button" src="posterframe.jpg" width="640" height="360" />
<video id="video1" style="display:none;" poster="posterframe.jpg" width="640" height="360" preload="none">
  <source src="video.mp4" />
  <source src="video.webm" />
</video>

Note: When implementing this functionality, you must not add the sublime class to the <video> element. This is because the video will be prepared through the JS API.

JavaScript Code

Put this code in a <script> element just before the </body> tag, or in an external file.

Below we provide 2 examples of the required code using jQuery and Prototype, please make sure that you embed the chosen library in your page!

jQuery Version:

sublimevideo.ready(function() {
  jQuery("img.custom_play_button").each(function() {
    jQuery(this).click(function(event) {
      event.preventDefault();
      // Hide the posterframe and prepare and play the video
      sublimevideo.prepareAndPlay(jQuery(this).attr("id").replace(/^posterframe_/, ""));
      jQuery(this).hide();
    });
  });
});

Prototype Version:

sublimevideo.ready(function() {
  $$("img.custom_play_button").each(function(img) {
    img.on("click", function(event) {
      event.stop();
      // Hide the posterframe and prepare and play the video
      sublimevideo.prepareAndPlay(img.readAttribute("id").replace(/^posterframe_/, ""));
      img.hide();
    }.bind(this));
  }.bind(this));
});

Note: Here, the custom_play_button class is used to bind the JavaScript API sublimevideo.prepareAndPlay method to the onclick event of the <img> elements that are used as initial play buttons.

Demo

You can see this feature in action on this page.