There appear 404 on some youtube thumbnails using maxresdefault

Created on 9 March 2023, almost 2 years ago
Updated 1 March 2024, 10 months ago

Problem/Motivation

When I add some specific youtube videos the URL added by oembed lazyload youtube returns a 404. It does not happen with every youtube video.

Example of a youtube video that has a maxresdefault thumbnail:

- Url: https://www.youtube.com/watch?v=8-9KCDxBpT4
- Thumbnail: https://i.ytimg.com/vi_webp/8-9KCDxBpT4/maxresdefault.webp

Example of a youtube video that does not have a maxresdefault thumbnail:

- Url: https://www.youtube.com/watch?v=E9qHr_XT6EE
- Thumbnail: https://i.ytimg.com/vi_webp/E9qHr_XT6EE/maxresdefault.webp

Steps to reproduce

1. Add a media field that uses a media library and remote video in a content type.
2. Create a node and add this video: https://www.youtube.com/watch?v=E9qHr_XT6EE
3. Go to see the content in a mobile resolution. There will appear the incorrect thumbnail, as it will use this URL: https://i.ytimg.com/vi_webp/E9qHr_XT6EE/maxresdefault.webp

Proposed resolution

Use hqdefault image instead of maxresdefault.

πŸ› Bug report
Status

Fixed

Version

2.0

Component

Documentation

Created by

πŸ‡ͺπŸ‡ΈSpain omarlopesino

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @omarlopesino
  • @omarlopesino opened merge request.
  • Status changed to Needs review almost 2 years ago
  • πŸ‡ͺπŸ‡ΈSpain omarlopesino

    Please review, thanks!

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Hey, thanks for the report.

    Do you know of any documentation for the Youtube thumbnail service and why images may be missing? I do worry that it'll become a game of whack-a-mole if we switch to a different image format without some evidence that such a move will result in more resilience.

  • πŸ‡ͺπŸ‡ΈSpain eduardo morales alberti Spain, πŸ‡ͺπŸ‡Ί

    Hi I found this table https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video...

    There are some thumbnails guaranteed to exist

    Width | Height | URL
    ------|--------|----
    120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/1.jpg
    120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/2.jpg
    120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/3.jpg
    120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/default.jpg
    320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq1.jpg
    320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq2.jpg
    320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq3.jpg
    320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mqdefault.jpg
    480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/0.jpg
    480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq1.jpg
    480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq2.jpg
    480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq3.jpg
    480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hqdefault.jpg
    

    Additionally, the some other thumbnails may or may not exist.

    Width | Height | URL
    ------|--------|----
    640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd1.jpg
    640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd2.jpg
    640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd3.jpg
    640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sddefault.jpg
    1280  | 720    | https://i.ytimg.com/vi/<VIDEO ID>/hq720.jpg
    1920  | 1080   | https://i.ytimg.com/vi/<VIDEO ID>/maxresdefault.jpg
    
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I'm really hesitant to make blocking REST calls on the back-end. That opens up a lot of possibility for performance issues (what if the youtube API takes even 2-3 seconds to respond and there are 1000 web requests to a page per second?).

    The guaranteed thumbnail dimensions are quite concerning...the max resolution is 480x360 -- that's definitely not going to work for some stakeholders. For example, the primary time (funding) for this module is Penn State World Campus -- who meticulously curates very high quality stills for any and all videos that we produce. I can't justify lowering quality across the board.

    I think that the way I'd like to pursue solving this is to offer a couple of configurable options in the formatter settings that let site builders decide which images to use. That would offer folks a flexible workaround while not introducing any risk of Denial of Service vectors and also not degrading functionality for power users.

  • Status changed to Needs work over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Setting back to NW for #6.

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Hey Omar,

    I invite you to check out the flexible-metadata-alter-architecture branch in the issue fork of https://www.drupal.org/project/oembed_lazyload/issues/3413985 ✨ Provide an extensible mechanism for thumbnail configuration and customization Needs work and see if it meets your needs. I've added support for more off-the-shelf rendering mechanisms while providing full backwards compatibility.

    Let me know if this helps. I'm going to try to get #3413985 added to a 2.1.0 release in the coming weeks after tying up some loose ends.

    Thanks

  • Status changed to Fixed 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    This behavior now has a solution and has been committed to 2.1.x, so marking as fixed.

    Thanks!

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024