If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based on an algorithm that might or might not be random. There are tips around for trying to game their algorithm, but that might be a little unethical and it’s unreliable since they’ve changed the algorithm over time. I think at youtube.com they’re welcome to do whatever they want, but when I’m displaying an embedded video on my own site I should be able to present the video with my choice of preview image – they’re my users and if I want to Rickroll them I should be able to!
So, I found this idea for placing an image over an embedded video, but it failed with a JavaScript error. This answer at stackoverflow got the code working correctly.
The method uses two “div” containers, one containing the replacement preview image and one containing the video embed code. The video is hidden using inline CSS and a bit of JavaScript toggles the image hidden and the video visible when the image is clicked. The image should be the same size of the video and should probably have some sort of “play” symbol so users know to click it. Here’s the code for the containers:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="vidthumb.jpg" style="cursor:pointer" /></div><div id="thevideo" style="display:none">
(put the YouTube embed stuff here)
</div>
A nice addition would be some way to give users with JavaScript disabled a plain link to the video at YouTube.
