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.

<!-- HTML FOR IMAGE AND VIDEO -->
<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>
</div>

<script> 
    // LOAD THE API       
    var tag = document.createElement('script');
    var player, myplay;
    var videoID = 'YOUR VIDEO ID';
    tag.src = "https://www.youtube.com/iframe_api";
    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) {
      myplay=event.target;        
      $('#vplayer').click(function () {
        $('#screen').hide(); // HIDE THE IMAGE
        $('#player').show(); // SHOW THE VIDEO
        myplay.playVideo(); // START THE VIDEO
      });
    }
</script>

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.

Comments

comments

Greg

Old school developer with a passion for food, bikes and a whole lot of weird things.

Leave a Reply

Your email address will not be published.