Change Youtube Thumbnail In Embed Player

Not impressed by the YouTube thumbnail of a video? You can change it by embedding the video with this neat trick.
change-youtube-thumbnail

Did you ever wanted to change the youtube thumbnail image in the embed player because the image was not good enough? Unless you own the video, there is no way to change the thumbnail of a YouTube video. But with a clever JavaScript trick and YouTube’s autoplay embed feature, we can achieve just what we want.

NOTE: This tutorial is shared only for educational purposes. Adsense Publishers and other publishers should take extra care when implementing this. Only use custom thumbnails that represent the theme of the video and don’t use misleading clickbait thumbnails. Codegena won’t be responsible for any violations as a result of it.

How does it work?

Instead of embedding the actual YouTube player, the required image is displayed with a custom play button on top of it to mimic the actual player. Whenever a user clicks the image, it gets replaced with the actual YouTube embed player. Not only does it help to display any thumbnail you want, but it improves the page load/ performance too. YouTube embed player is quite heavy on the JavaScript side at somewhere around 300KB I believe and this neat trick to load the video on demand is something you shouldn’t overlook.

This trick is intended for users who are looking to

  • display a higher resolution image in the embed player.
  • display a slightly different image for better click-through

How to Change Youtube Thumbnail In Embed Player?

Use the following embed code to change the youtube thumbnail image.

<!--Embed Code Start-->
<div class="youtube" id="VIDEO_ID" src="IMAGE_URL" style="width:500px; height:294px;"></div>
<script type="text/javascript" src="https://codegena.com/assets/js/youtube-embed.js"></script>
<!--Embed Code End-->
  • Replace the VIDEO_ID with the actual video id
  • Replace IMAGE_URL with the actual image URL. Delete  “src=”IMAGE_URL” ”  to use the default image URL in the ajax player.
  • Change width and height to your desired size with the unit.

Alternate method

  1. Go to youtube embed code generator.
  2. Enter the video id or URL in the first field.
  3. Enter the desired height or width. The other field will be automatically calculated.
  4. Under advanced parameters check the “Load Async ” option.
  5. The “custom thumbnail field” will now be enabled. Enter the image URL there and hit generate code.
  6. Copy the code and use it wherever you want.

Working Demo

 

Related Posts

Credits: Featured image Courtesy

Total
0
Shares
11 comments
  1. This is awesome. Fantastic hack! Thanks a lot for this one.

    I can’t wait for the next update – It would be Godsend if we could also have more control on all the other parameters.

      1. Hey Shan… Right now, all I can think of all the controls that get disabled upon selecting the Async Player. :D

        Sorry I couldn’t think beyond that as yet; but when something strikes, I’ll be sure to post it here.

          1. Hey, I have implemented the requested feature. Now you can control all parameters except the flash player(responsive also disabled but async players are already responsive) while using async player! A very good advantage of this would be ability to set a custom thumbnail for an embedded playlist.
            What’s more interesting is that I have found a major bug in the async player and I have successfully fixed it. All this is possible only because of you! Thanks a lotttt!!!!

          2. Shan, you’re being modeset. You have bettered what was already awesome. I thank You a BIG BIG ton.

            You could actually sell this stuff. ;)

Leave a Reply
Related Posts
Total
0
Share