oEmbed system cannot retrieve thumbnail extensions from TikTok / Vimeo

Created on 24 July 2021, over 3 years ago
Updated 3 November 2023, about 1 year ago

Problem/Motivation

After downloading a thumbnail for a remote oEmbed resource, certain operations (e.g., applying an image style to the thumbnail) can fail if the thumbnail had no file extension, with errors like:

Could not apply Medium (220×220) image style to public://oembed_thumbnails/5qPKeF_Fcn22-QFyRf6_CK8IX1YMBi4xeeLOjBrlWtY. because the style does not support it.

This has broken our support for Tiktok, which doens't supplies file extensions in its thumbnail URLs. As an example, see https://www.tiktok.com/oembed?url=https://www.tiktok.com/@tutiandyuki/vi... . Note that the response has a thumbnail_url field, but it has no file extension.

Even though the thumbnail is being generated while creation of media it is not being rendered when it is attached to a node. additional information is provided here #82 🐛 oEmbed system doesn't work if thumbnail url does not have a file extension Fixed

I have created a sandbox project for easier testing.

Steps to test :

1.Enable the Module.
2.Create Media entity by navigating to Content > Media > Add Media > TikTok . You can see the Thumbnail is being Rendered.
3. Now attach the TikTok Media to any Node Bundle and try to embed the TikTok media entity (New or already created one). You will observe that Media item is attached and rendered, but it wont display thumbnail.
4. If you check logs you will find an similar error mentioning :

Could not apply Medium (220×220) image style to public://oembed_thumbnails/5qPKeF_Fcn22-QFyRf6_CK8IX1YMBi4xeeLOjBrlWtY. because the style does not support it.

Proposed resolution

Remaining tasks

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Media 

Last updated 1 day ago

Created by

🇮🇳India bhanu951

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States Chris Matthews

    I think there might be regression here.
    On a fresh 10.1.2 standard profile install.
    Enabled Media and Media Library only.
    Added a Vimeo media item (https://vimeo.com/851775771)
    No thumbnail (confirmed thumbnail exists on Vimeo)

  • 🇺🇸United States Chris Matthews

    Back to previous title, as Vimeo thumbnails are no longer working

  • 🇺🇸United States wstocker

    I'm on Drupal 9.5.10 and Vimeo thumbnails for private videos have stopped working.

  • 🇳🇱Netherlands megachriz

    It looks like getting the thumbnail from Vimeo works if you configure the video privacy settings to "Hide from Vimeo" + "Embed Anywhere".

    Vimeo denies access to video metadata when there are embed restrictions

    I suspect that if you configured the video on Vimeo to only allow embedding from specific domains, retrieving the thumbnail fails.

    Because in that case Vimeo returns something like the following:

    {
      "type": "video",
      "version": "1.0",
      "provider_name": "Vimeo",
      "provider_url": "https:\/\/vimeo.com\/",
      "html": "<iframe src=\"https:\/\/player.vimeo.com\/video\/123456789?app_id=123456\" width=\"854\" height=\"480\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"><\/iframe>",
      "width": 854,
      "height": 480,
      "domain_status_code": 403,
      "video_id": 123456789,
      "uri": "\/videos\/123456789"
    }
    

    This JSON code was retrieved by adding debug code to Drupal\media\OEmbed\ResourceFetcher::fetchResource(), right under the line $content = (string) $response->getBody();.

    Note that "domain_status_code" is "403", so it looks like that Vimeo denies access. Is this because Vimeo doesn't know the domain that the request comes from?

    This were the video privacy settings on Vimeo:

    Thumbnail works when there are no embed restrictions

    If I configure the video to allow it to be embedded everywhere, I do get the thumbnail.

    The response then looks something like this:

    {
      "type": "video",
      "version": "1.0",
      "provider_name": "Vimeo",
      "provider_url": "https:\/\/vimeo.com\/",
      "title": "Foo",
      "author_name": "Foo",
      "author_url": "https:\/\/vimeo.com\/foo,
      "is_plus": "0",
      "account_type": "live_premium",
      "html": "<iframe src=\"https:\/\/player.vimeo.com\/video\/123456789?app_id=123456\" width=\"854\" height=\"480\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" title=\"Foo\"><\/iframe>",
      "width": 854,
      "height": 480,
      "duration": 337,
      "description": "",
      "thumbnail_url": "https:\/\/i.vimeocdn.com\/video\/1234567890-abcdefghijk-d_640",
      "thumbnail_width": 640,
      "thumbnail_height": 360,
      "thumbnail_url_with_play_button": "https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1234567890-abcdefghijk-d_640&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png",
      "upload_date": "2023-09-26 05:12:42",
      "video_id": 123456789,
      "uri": "\/videos\/123456789
    }
    

    This were the video privacy settings on Vimeo:

Production build 0.71.5 2024