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