Codegena
change-youtube-thumbnail

Change Youtube Thumbnail In Embed Player

MAY be you want to change youtube thumbnail image in the youtube embed player, but can you do that? Not directly, but we have a solution.  Youtube doesn’t offer any API to change the youtube thumbnail neither is it possible directly. Then how did we do it?

NOTE : This tutorial has been shared only for educational purposes. Adsense Publishers and other publishers should take extra care when implementing this. Only use custom thumbnails that represents the theme of the video. Codegena won’t be responsible for any damages occurred to you or your site.

How it works?

The way it is implemented is using an async player. So when the user clicks the image the actual video player is loaded up and played automatically. This also improves your page speed dramatically considering you have multiple videos embedded.  These on-demand youtube players are thus more efficient and more user friendly.

Who is it for?

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

Adsense publishers and other ad publishers  should use this trick with extra  caution like mentioned above.

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 unit.

Alternate methodyoutube-embed-custom-thumbnail

  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

Shan Eapen Koshy

Shan Eapen Koshy is a web developer, technical blogger and a YouTuber. He has created several web applications and has written many app scripts.

Follow Us

Don't be shy, get in touch. We love meeting interesting people and making new friends.