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_IDwith the actual video id - Replace
IMAGE_URLwith 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
- Go to youtube embed code generator.
- Enter the video id or URL in the first field.
- Enter the desired height or width. The other field will be automatically calculated.
- Under advanced parameters check the “Load Async ” option.
- The “custom thumbnail field” will now be enabled. Enter the image URL there and hit generate code.
- Copy the code and use it wherever you want.
Working Demo
Related Posts
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?
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.
At first I thought that was useless and now I know it isn’t . I will try to implement it :)
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!!!!
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.
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.
Let’s not forget sweet option data-params=”?start=1572&end=1677&autoplay=1″. Thanks!