I understand that we can choose from 4 autogenerated YouTube thumbnails for each video. Sometimes, these thumbnails contain black bars due to the original video's aspect ratio. Is there any way to modify it before pushing the modified image to the client side?
Purpose of these thumbnails are for a list of video search results on a website. and not as an embedded player
ideally, i do not wish to store these thumbnails on the server.
currently looking at this possible solution, bounty available!
There are multiple possible solutions, each of which has its plusses and minuses. Note that these are all CSS/Javascript based, as the YouTube APIs don’t report video aspect, image aspect, and the like.
1) The solution you link to can work, setting the thumbnail as a background image to an element, centering the background image, and then explicitly setting the height and width of the element.
<div style=”width: 120px; height:51px; background: url(https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg) center no-repeat; background-size:120px 67px;”></div>
The biggest drawback of such a solution is that you then create a lot of empty elements on your page, just to get the background images, and the images would have to be set as background with javascript (unless your CSS was dynamically generated by a server side process) since they’re each unique. You also have to set the background-size property if you need to resize the thumbnail itself.
2) Another solution would be to have the image exist in an element as normal, but have that wrapped in another element that has an explicit size, and has overflow set to be hidden:
<div style=”width:120px;height:51px;overflow:hidden;”>
<img src=”https://i1.ytimg.com/vi/qV4tiq-w2HM/mqdefault.jpg” style=”margin-top:-8px”/>
</div>
While this would be easier to automate as it could be done purely with css classes, it still suffers from lots of extra markup, and from having to shift your image up a bit inside its container (so you trim the top and bottom bars).
3) If you are OK with having your images have an absolute position (which often works just fine, depending on how your layout is constructed), there is the CSS ‘clip’ property:
<img src="https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg" style=”position:absolute; width: 120px; top:0; clip:rect(8px,120px,59px,0px);”/>
The clip property constructs a visible rectangle, represented from the top margin, right margin, bottom margin, and left margin. Very clean and sensible, and easily programmable. Yet not possible if your images can’t be absolutely positioned, so that may be a no-go.
4) An option that does pretty much what the ‘clip’ property does, but that is more broadly applicable, would be to use a canvas and redraw the thumbnails as they load, putting your crops into place. Something like this:
var context = document.getElementById('myCanvas').getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg';
imageObj.onload = function() {
context.drawImage(imageObj, 0, 23, 320, 120, 0, 51, 120, 51);
};
In a case like this, the number parameters represent the x position of the source image, the y position of the source, how much width of the source to look at, how much height of the source to look at, the x position of the canvas to start redrawing, the y position on the canvas to start redrawing, the width of the new image, and the height of the new image. If you wrote your routine properly, you could use a single canvas, and just call a programmatic method to draw each thumbnail the way you wanted.
Keep in mind that all of these approaches require you to know in advance how you want to crop each image. There isn’t really a way to tell from any API call whether or not an image will have black bars. If you used the canvas approach, you could use the getimageData() function to analyze each image and search for the black bars, and then do the cropping/resizing based on the results of that. But that’s really another question.
Here’s a jsfiddle that demonstrates the different approaches I outlined above.
