Site Overlay

Custom Frame for you Embeded YouTube

YouTube Original Frame

Youtube is a cool solution for hosting videos for embedding in you site. You can place these embeds all over your site, and with minimal clicking on the actual YT interface, you can turn off controls, related videos, sizes and so on.
Yet, there is one thing you cannot do in an easy straight forward way, and that is to add a custom image for the video before it loads. I mean, in the sense of having a less “youtube look and feel” to the video before it starts playing.

YouTube Custom

There are plenty of tutorials out there on the web that show you how to do this, but, most of them use the “load iFrame with autoplay=1” approach. This means that the views of the video are not counted, even if you watch the video to the end. Google did this to avoid people loading in hidden videos to get massive amounts of plays without people actually seeing the videos.

The example below uses the youtube API to trigger a play on a video when the user clicks on an image. Actually, with the API you could create a fully custom player using YT as your backend, but, more o that in the future. Right now, here is the code for playing a video with a custom image.

<div id="vplayer" class="video-wrapper">
  <!-- IMAGE -->
  <img id="screen" src="/images/video_frame.jpg" style="cursor:pointer" />
  <!-- VIDEO -->
  <div id="player" style="display:none;"></div>

    // LOAD THE API       
    var tag = document.createElement('script');
    var player, myplay;
    var videoID = 'YOUR VIDEO ID';
    tag.src = "";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '534',
        width: '950',
        videoId: videoID,
        playerVars: { 
          'autoplay': 0, 
          'controls': 0, // HIDE THE CONTROLS 
          'showinfo': 0, // HIDE INFO
          'rel': 0 // HIDE RELATED VIDEOS
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange

    function onPlayerReady(event) {;        
      $('#vplayer').click(function () {
        $('#screen').hide(); // HIDE THE IMAGE
        $('#player').show(); // SHOW THE VIDEO
        myplay.playVideo(); // START THE VIDEO

Please note that this example is using JQuery just to make life slightly easier (lines 38-41). It is not necessary, you could just add the click events and show/hide manually using regular JS.



Leave a Reply

Your email address will not be published.