Resize latest LTT Video boxes

[Spotty]

On the panel on the right of the page it shows the latest Linus Tech Tips & other channel videos. Can the blocks be resized so the video correctly fits the box and there's no black bars? It would look better and it would take up less vertical space on the page, and the right panel already extends the page quite a lot on threads with only a few replies.

 

The box for the video thumbnail is 320x240 (4:3) but the video thumbnail is 320x180 (16:9). Setting the box to 320x180 should remove the black bars.

 

How it looks now & how it would look fixed.

[Stahlmann]

Tbh i never noticed that. The black bars aren't very visible in dark mode  

[Spotty]

8 minutes ago, Stahlmann said:

Tbh i never noticed that. The black bars aren't very visible in dark mode  

Less noticeable on dark mode due to the darker background colour but the extra spacing between the videos and the video title is still pretty noticeable.

 

Dark mode.

[Nayr438]

Technically, the box is the correct size, its the Image preview (480x360) that the black lines are coming from.

 

 

You could set a custom CSS rule however with something like Stylus to slim it down. This is what I personally have.

Spoiler

    /* Sidebar Youtube Video Images */
    .lmg-card .card-img-a {
        width: unset !important;
        margin: unset;
    }

    .ipsWidget .card-img {
        margin-top: -28px;
        margin-bottom: -28px;
    }
    
    
    My Personal Stylus Theme if interested in something that takes up less space around the forum. https://github.com/Nayr438/ltt_stylus_theme

 

 

 

[Alex Atkin UK]

I don't think it would be wise to do it even if they can, if they ever decided to do a 16:9 video it would end up cropped.

[Spotty]

1 minute ago, Alex Atkin UK said:

I don't think it would be wise to do it even if they can, if they ever decided to do a 16:9 video it would end up cropped.

The thumbnail image should always be 16:9 regardless of the video aspect ratio. The LTT videos are 2:1 but the thumbnail is 16:9. It's the same for Youtube where the thumbnails for all videos are 16:9 (210x118). If you look at the latest LTT video for example in the 16:9 thumbnail you can see the pink watch band on his hand but if you click to view the video which is 2:1 aspect ratio the preview the watch on his wrist is cut off. You can also see it at the top of the video where more of his hair and the top corner of the monitor is cut off when the thumbnail is displayed at 2:1 ratio to match the video player.

 

Spoiler

 

Thumbnail displayed on the channel page (16:9):

 

Thumbnail displayed in the video player (2:1 to match video aspect ratio):

 

 

 

 

49 minutes ago, Nayr438 said:

Technically, the box is the correct size, its the Image preview (480x360) that the black lines are coming from.

Ah, that makes sense. I didn't even think to check the actual image of the preview being used. Might be possible to pull a thumbnail preview image for the videos in 16:9 aspect ratio without the black bars, otherwise CSS adjustments like you have could fix it.

[Nayr438]

19 minutes ago, Spotty said:

Might be possible to pull a thumbnail preview image for the videos in 16:9 aspect ratio without the black bars, otherwise CSS adjustments like you have could fix it.

After looking into it a bit, I stumbled across a informative post about this and yes there are different images you can pull in.

This one seems like a good candidate, i.ytimg.com/vi/odZSCdNTFPw/mqdefault.jpg

 

But heres a list of available formats.

Spoiler

 

• Player Background Thumbnail (480x360):
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/0.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/0.jpg

• Video frames thumbnails (120x90)

  • WebP:
    • Start:
      • i.ytimg.com/vi_webp/odZSCdNTFPw/1.webp
    • Middle:
      • i.ytimg.com/vi_webp/odZSCdNTFPw/2.webp
    • End:
      • i.ytimg.com/vi_webp/odZSCdNTFPw/3.webp
  • JPG:
    • Start:
      • i.ytimg.com/vi/odZSCdNTFPw/1.jpg
    • Middle:
      • i.ytimg.com/vi/odZSCdNTFPw/2.jpg
    • End:
      • i.ytimg.com/vi/odZSCdNTFPw/3.jpg
• Lowest quality thumbnail (120x90)
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/default.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/default.jpg
• Medium quality thumbnail (320x180)
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/mqdefault.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/mqdefault.jpg
• High quality thumbnail (480x360)
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/hqdefault.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/hqdefault.jpg
• Standard quality thumbnail (640x480)
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/sddefault.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/sddefault.jpg
• Unscaled thumbnail resolution
  • WebP
    • i.ytimg.com/vi_webp/odZSCdNTFPw/maxresdefault.webp
  • JPG
    • i.ytimg.com/vi/odZSCdNTFPw/maxresdefault.jpg

 

 

 

[Spotty]

26 minutes ago, Nayr438 said:

After looking into it a bit, I stumbled across a informative post about this and yes there are different images you can pull in.

This one seems like a good candidate, i.ytimg.com/vi/odZSCdNTFPw/mqdefault.jpg

 

But heres a list of available formats.

Interesting, that one keeps the 16:9 aspect ratio but most of the higher quality ones use 4:3 with black bars for some reason.

 

I think the intention is to use a higher quality image and then scale it down. The image currently used is 480x360 then scaled down to fit 320x240 on desktop. On desktop it's displayed at 320 pixel width but that might be different on mobile displays and need a higher resolution thumbnail. My phone with a 2340x1080 display seems to display the current 480x360 thumbnail at approximately 1030x773.

Spoiler

 

26 minutes ago, Nayr438 said:

Unscaled thumbnail resolution

• WebP
  • i.ytimg.com/vi_webp/odZSCdNTFPw/maxresdefault.webp
• JPG
  • i.ytimg.com/vi/odZSCdNTFPw/maxresdefault.jpg

 

The Unscaled thumbnail resolution image is the only other 16:9 thumbnail and is higher quality (1280x720) so that might also be an option.

Edited June 17, 2021 by Spotty

[colonel_mortis]

This happened because I switched over to a different API, which provides less (no) flexibility on stuff like that. I think I can solve it by just doing a find/replace on the image URL to get it to the format that I want, but I do need to do a bit of testing to validate that approach.