Using jQuery to create a custom thumbnail for an embedded video
Max Glenister
Recently Jenny asked me for a way to embed a YouTube video with a custom thumbnail that would play the video when clicked.
I’m aware that YouTube allows Partners to use a custom thumbnail for their videos, but standard users are restricted to a selection of random frames from their uploaded video. If you want your YouTube embed to look nice on your site, but are not a Partner, this isn’t ideal.
I Googled around to look for a solution, but most solutions involve adding extra frames to the video at specific intervals, and trimming videos using YouTube once they’ve been uploaded. Again, not ideal.
I decided to approach this from a more technical angle then, and so I came up with the following jQuery snippet
$(function () {
$('.ytembed:not(.processed)').each(function () {
var $embed = $(this),
$img = $embed.find('img'),
$anchor = $embed.find('a'),
width = $img.width(),
height = $img.height(),
url = $anchor.attr('href'),
$iframe = $('<iframe />', {
'src': url,
'width': width,
'height': height,
'frameborder': 0
});
$anchor.click(function (e) {
e.preventDefault();
$embed.html($iframe);
});
});
});
This needs to be used with the following HTML structure:
<!-- you need a div with the class 'ytembed' -->
<div class="ytembed">
<!-- put a link with the url of your video embed -->
<a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ">
<!-- and an image with the width/height specified -->
<img
width="560"
height="315"
src="/path/to/custom_thumbnail.jpg"
alt="Click to play"
/>
</a>
</div>
And there you have it, a custom thumbnail for a YouTube embedded video.
Related posts
- A simple solution for a jQuery animation loop memory leak
I’m probably stating something very obvious to everybody, but this is something that caused me a couple of hours of confusion. When creating a new slightly-fancier page to be displayed on omgmog.net I had a problem in that after a certain amount of time the browser would become unresponsive (or in Google Chrome the page would die - but I love how Google Chrome handles this). The problem I soon realised was in my animation loop. I’ve got a couple of lines of jQuery that move some elements on the page around randomly, to give a floating effect. The original code was as follows: $("h1 span").not("#h1p3").everyTime(0,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()}); }); It turns out the problem with this code is that the animation was looping before it had completed, so the browser presumably is stacking up all of these $().animate(); functions, which in turn caused the browser to become unresponsive. To remedy this, I specified a time for the $().animation(); function, and set the $().everyTime(); timeout to slightly longer than this: $("h1 span").not("#h1p3").everyTime(500,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()},490); }); With these small changes in place, it seems my problem is solved! I don’t have any “lessons learned” speech to close the post with, it’s just something that I found interesting :)
- Using jQuery to supply and clear default input values
This is a repost of a solution I provided over at the smashing magazine forums. I’m posting it here as it’s a pretty useful solution in itself. The original question is as follows: I’m building a new website and on this one page I need to use a huge form, instead of using labels I want to enter the “label” text in the value attribute and then use JS to clear the field on mouseclick. The problem is that every field needs to be filled out. I don’t want users hitting the submit button with some of the standard values still in place (easy to miss certain stuff) because this will mess things up. I can ofcourse check for empty fields but to do this I need to somehow check if all the fields have been changed on form submit. So I whipped up a quick implementation of how I would do it using jQuery.
- Merge Commits Are Just Noise
Run git log --graph on most team projects and you’ll see the problem. Parallel lines everywhere, merge commits that just say “Merge branch ‘feature/x’ into develop”. None of it useful. It’s noise. (Merges aren’t the only source: an hourly GitHub Action was quietly doing the same to my own history.) I’ve been using a rebase-based workflow for years to avoid this. The history stays linear and the diffs stay readable. This post covers both the argument and the specific branch structure I use for team feature work.
Discussion
- 2012
- KB
Hi there - this is exactly what I’ve been looking for, but have been unable to get it to work.No console errors and JQuery is being called. Clicking behaves as if the function was not present and redirects straight to YouTube - I’d appreciate any suggestions for tracking down the problem!
Hi Kelsey, are you preventing default? You need to do this as the first thing inside the click function on the a, such as:$(this).find(‘a’).on(‘click’, function(e){ e.preventDefault(); // other stuff});
- KB
Hi Max, I can’t even recall which project I wanted to use this on… it’s likely that I was trying to use it with Viddler, Joomla/K2 and some kind of modal window.Glad you replied at this point tho, I have another project that will require YouTube and custom thumbs (and Joomla/K2 and modals) starting shortly.
- 2014
- R
Doesn’t seem to work on ipad. Looks like it looks for a flash player??
Will depend entirely on what YouTube serve via the iframe.
Join the conversation
Reply from your own site with a Webmention (how?).