Change the YouTube Embed Image to Custom Image
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 then I should be able to! I thought I would never find a way until now. Check it out below!
Here’s the code for the containers:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="IMAGE_PATH_URL" style="cursor:pointer" /></div><div id="thevideo" style="display:none">
(put the YouTube embed stuff here)
Here is the exact code from above example.
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img style="cursor: pointer;" src="http://dwssite.com/wp-content/uploads/2012/02/YT-pic.jpg" alt="" /></div>
<div id="thevideo" style="display: none;"><object width="560" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/De_x9NVCEy4?version=3&hl=en_US&autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="560" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/De_x9NVCEy4?version=3&hl=en_US&autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></div>
You might also like
WordPress makes it easy to create and adjust navigation menus but one thing that is difficult to do is create a menu that is image based. Yes there are many
The Facebook Like box placed on your website /blog is probably the easiest way to attract new fans to your Facebook page. And the same rectangular box can even help
WordPress shortcodes are great. They let you perform complex operations or display dynamic content with just a tiny bit of text in any page or post. I recently needed a
Here are some problems I face when embedding YouTube videos on my website. First, the user has to click on the “play” button for the video to play. People who