0

So I have YouTube video thumbnails displayed on a website, but they seem to have letterboxing at the top and bottom. I need to crop this, but I can't just crop x many pixels because of the reponsive design.

How would I crop images dynamically based on their width? Would I have to do it using Javascript during resize? Or is there a simpler approach?

  • You could use [16:9 YouTube thumbnails](http://stackoverflow.com/a/18979282/331137) to get rid of the vast majority of the bars by just not having them in the first place. – John Flatness Feb 16 '15 at 02:53

2 Answers2

0

I had a similar issue. I solved it by drawing the image to a canvas, iterating through rows of pixels and checking if they were black. The first time a colored pixel was detected marked the edge of the letterbox. I used this information to crop the image and draw it to another canvas.

It's not a perfect solution, but it worked for me. I hope this helps.

posit labs
  • 8,951
  • 4
  • 36
  • 66
0

You can use object-fit css but it's not full browser compatible, however a polyfill exist

Else you can use div with background-image and background-size with cover or contain, that have a better support

Yukulélé
  • 15,644
  • 10
  • 70
  • 94