Wrong image size when requesting video information

[BuffPrime]

Hey guys,

when I request the information from a specific video via https://api.twitch.tv/kraken/videos/, all the thumbnails I get have a size of 320x240. This causes black borders at the top and bottom.
How can I get a size like 320x180. which the example in https://dev.twitch.tv/docs/v5/reference/videos#get-video does response?

[sundheden]

@BuffPrime

320x180

320x180 is a 16:9 ratio, while the size you get in your requests (320x240) is a 4:3 ratio.

The reason you get this is probably that the videos you are requesting were streamed/encoded in a 4:3 format.

If you want the exact size, regardless of ratio, you could use the template and specify your own size, but you will get the black borders. I would personally strictly make my application support 16:9 format since it’s most common, and just rescale the odd ones on the client side, possibly clipping them to keep the image aspect ratio while showing them as the same size.

[Alca]

If you’re using HTML/CSS, you could use background-image on a <div> instead of using an <img src="">

let streamImg = document.createElement('div');
streamImg.classList.add('stream-img');
streamImg.style.backgroundImage = `url(${json.stream.preview.medium})`;
// Where container is wherever you wish to put it
container.appendChild(streamImg);

or

let streamImg = `<div class="stream-img" style="background-image: url(${json.stream.preview.medium})"></div>`;
// Where container is wherever you wish to put it
container.innerHTML += streamImg;

The result should be like this:

<div class="stream-img" style="background-image: url(https://static-cdn.jtvnw.net/previews-ttv/...)"></div>

And then the CSS:

.stream-img {
    width: 320px;
    height: 180px;
    background-size: cover;
    background-image: url(/img/default_stream_img.png);
}

This will result in stretching the image proportionally to cover the whole area. (Acting like a crop)

[BuffPrime]

Thanks for your answers!

@sundheden

The reason you get this is probably that the videos you are requesting were streamed/encoded in a 4:3 format.

The broadcast I want to display is my own and it’s definitly not encoded in a 4:3 format. I also changed the standard thumbnail into a custum 16:9 one in the video manager. When I look at my videos, the image Twitch uses is also the 320x180 sized but I don’t know from where they take it.

@Alca

If you’re using HTML/CSS, you could use background-image on a <div> instead of using an <img src=“”>

Thats of course an idea, but I want to make the website responsive, so to fix the image size doesn’t work. Nevertheless, when I try it, I have still the upper black border shown in the div.

So this doesn’t work. I need to get the 16:9 format, just like Twitch does when displaying my past broadcasts.