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>
<!--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.
- 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.
- Set a custom thumbnail for a youtube playlist embed.
- Disable HTML5 for youtube embed player or force flash