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.

  • 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

  • theultimate1

    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.

    • Thanks! What extra controls would you like to have?

      • theultimate1

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

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

        • At first I thought that was useless and now I know it isn’t . I will try to implement it 🙂

          • theultimate1

            Sooper… can’t wait for it. Thanks Shan 🙂

          • 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!!!!

          • theultimate1

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

          • It is me who should thank you for encouraging me to do what I love to.

  • Pingback: Why set custom thumbnail for youtube playlist embed and how? - Codegena()

  • Pingback: Disable Youtube HTML5 player and load Flash - Codegena()

  • brucetonbryfield

    Hi this is brilliant thank you – how would I go about controlling the time the video starts in the embed code?

    • You could use our youtube embed code generator tool to generate time specific embed codes. THere is an option for start time and stop time on the generator page.

  • Miloš Babovi?

    Let’s not forget sweet option data-params=”?start=1572&end=1677&autoplay=1″. Thanks!