Using CSS only to remove the black bars from YouTube HQdefault image?

Question

(Did some search but couldn't find the exact same question/answer)

I am displaying the YouTube's hqdefault thumbnails on my page. However, I noticed they are 480 by 360, which means they have black top and bottom bars for all 16:9 ratio videos (which are the majority)

Example is: http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg

My question is:

I want the image to auto scale to fit its container's width, which will be a percentage of the total window's width (this means I don't know the exact pixel value in advance). And hide the black bars, and of course don't distort the image's ratio.

Can this be done using CSS only (hopefully with good browser support)? -- I am ok to assume all images should be 16:9 (for those that are of other ratio, I am ok to cut off some part of it, and only display part of it in 16:9).

Thanks

(PS: I have a JS solution, but I want to see if it doable in CSS. The JS solution is to use JS to get the container's width, then set the container's size according to 16:9 ratio. Then stretch the image and position it in the center, hide the extra areas of it -- which basically hides its top and bottom black bars)

score 2 · Answer 1 · answered Nov 09 '15 at 07:44

2

Maybe this - set the image as the background to a 16 x 9 div, then just set image width to 100% and position 50% 50%

div {
  background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
  background-size:100%;
  background-position: 50% 50%;
  height:180px;
  width:320px;
  }

<div></div>

answered Nov 09 '15 at 07:44

sideroxylon

4,338
1
22
40

He asked for a solution that can auto scale to fit its container's width. You're using a fixed size – Itay Gal Nov 09 '15 at 08:08
There are various ways the OP can achieve that, depending on too many unknowns. – sideroxylon Nov 09 '15 at 08:19
1

You are right, and your solution is not one of them. In your solution the image stays the same size when the screen is being scaled. – Itay Gal Nov 09 '15 at 08:24

score 2 · Accepted Answer · edited May 23 '17 at 12:01

I found this solution. Here's an example :

You set the div to width:100%, it will now stretch to the container size, in this case, the body. Then you set the padding-bottom: 56.25%; to get the 16:9 ratio.

Now set overflow: hidden; to hide what's coming out of the div and set top: -16.75%; to hide the upper black strip.

HTML

<div class="stretchy-wrapper">
    <div>
        <img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width:100%;"/>
    </div>
</div>

CSS

body {
    width: 70%;
    margin: 8px auto;
}

div.stretchy-wrapper{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    background: blue;
    overflow: hidden;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: -16.75%; bottom: 0; left: 0; right: 0;
}

score 1 · Answer 3 · answered Nov 09 '15 at 08:18

1

I hope this jsfiddle will help you. Cheers!

working urljsfiddle

It will be fit even your web application/web site is responsive.

answered Nov 09 '15 at 08:18

Antony SUTHAKAR J

912
1
7
13

Using CSS only to remove the black bars from YouTube HQdefault image?

3 Answers3