title attribute still not added to oEmbed iframe

Created on 3 October 2019, over 4 years ago
Updated 4 June 2024, 23 days ago

Description of the problem

A YouTube video added with the core Media module and rendered via oEmbed will produce an outer iframe that includes a title attribute, but renders an inner iframe that does not include the title attribute. This is flagged by some accessibility scanning tools as a violation (aXe; in contrast, Lighthouse does *not* flag it as a problem).

Steps to reproduce

(Tested on 4/21/2021, using Drupal 9.1.6)

1. Enable media and media_library
2. Add a field of type "Media" to a node type, set to allow media of type remote_video.
3. Add a node populating the media field with a YouTube video (https://www.youtube.com/watch?v=iyjtK8jPdjM)
4. View the node. The wrapping iframe contains a title attribute, but the interior iframe does not:

The issue does not occur using a Vimeo video (tested with https://vimeo.com/7073899).

Proposed resolution

After retrieving the markup from the oEmbed provider, in Drupal/media/IframeMarkup...
1. Replicate the same markup checking as provided in MarkupTrait::create (cannot be directly called in the class, since it's a trait.
2. Subsequently check the provided iframe for a title attribute. If none is present, try to add the title provided by the oEmbed provider. If none is present, generate a semantically useful title tag that identifies the media provider.

Original post

so, I just updated to 8.7.8, and the fixed 3021452 β†’ issue is persisting for me. I see a title is provided for my example youtube video.

VIDEO: https://www.youtube.com/watch?v=6X8f9CLBoB8

EMBED JSON URL: https://www.youtube.com/oembed?format=json&url=https%3A%2F%2Fwww.youtube...

EMBED JSON:

{
    "provider_url": "https://www.youtube.com/",
    "author_name": "The Four on KTVU",
    "height": 270,
    "thumbnail_height": 360,
    "provider_name": "YouTube",
    "author_url": "https://www.youtube.com/channel/UCHTnUyoYpA4txfWEVoY1Ysg",
    "width": 480,
    "version": "1.0",
    "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/6X8f9CLBoB8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
    "thumbnail_width": 480,
    "thumbnail_url": "https://i.ytimg.com/vi/6X8f9CLBoB8/hqdefault.jpg",
    "type": "video",
    "title": "New Sensor Network Reveals Telltale Patterns in Neighborhood Air Quality"
}

GENERATED IFRAME IN RENDERED DRUPAL 8.7.8 PAGE:

<div class="embed-media embed-media--video-youtube">
<iframe src="https://www.youtube.com/embed/6X8f9CLBoB8?feature=oembed" allowfullscreen="allowfullscreen" width=" 480" height="270" frameborder="0"></iframe>
</div>

I've even tried deleting the iframe and re-creating it. No luck. The title just doesn't get appended to an attribute in the <iframe> tag.

My CKEditor Media Embed module is configured to use Provider Url: //noembed.com/embed?url={url}&callback={callback}, which does show an iframe without a title, but does include the title data in the json:

GENERATED IFRAME URL: https://noembed.com/embed?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%...

EMBED JSON:

{
    "html": "\n<iframe width=\" 480\" height=\"270\" src=\"https://www.youtube.com/embed/6X8f9CLBoB8?feature=oembed\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>\n",
    "version": "1.0",
    "height": 270,
    "thumbnail_url": "https://i.ytimg.com/vi/6X8f9CLBoB8/hqdefault.jpg",
    "thumbnail_width": 480,
    "title": "New Sensor Network Reveals Telltale Patterns in Neighborhood Air Quality",
    "author_name": "The Four on KTVU",
    "url": "https://www.youtube.com/watch?v=6X8f9CLBoB8",
    "width": 480,
    "provider_name": "YouTube",
    "thumbnail_height": 360,
    "provider_url": "https://www.youtube.com/",
    "type": "video",
    "author_url": "https://www.youtube.com/channel/UCHTnUyoYpA4txfWEVoY1Ysg"
}

If I am missing something about how the 13282573 β†’ fix is supposed to work, can someone please walk me through it?

P.S. My Basic HTML editor has the title attribute enabled for iframes, so I doubt its being filtered out (and wouldn't expect it to be anyways):

P.S.S. For what it is worth, I have also tested using iframe.ly as the source and also am not getting a title in that case.

<iframe src align frameborder height width scrolling type title bgcolor allowtransparency>

πŸ› Bug report
Status

Postponed

Version

11.0 πŸ”₯

Component
MediaΒ  β†’

Last updated about 4 hours ago

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

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 joegl

    tl:dr; Unlisted or domain-restricted Vimeo videos do not return metadata (including the title) in the oembed API results unless the URL is sent as a Referer header.

    I've noticed the title attribute missing from the inner iframe when using the oembed content in Drupal to display videos.

    From what I can tell, the core media module is getting the iframe code directly from the Vimeo API response using their oembed.json. The request is made in core/modules/media/src/OEmbed/ResourceFetcher.php. A request to the Vimeo API looks like this: https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/VIMEO_VIDEO_ID

    In reviewing the Vimeo API documentation for oembed's, this appears to be an issue with the video privacy settings. The videos on our sites have domain-level privacy enabled on Vimeo -- this means the videos can only be embedded and viewed on the configured domains. In the "Embedding videos with domain-level privacy" section, it says (paraphrasing):

    For videos with the whitelist privacy setting β€” that is, videos with domain-level privacy β€” The oEmbed request returns a simplified response containing no private metadata.

    The metadata excluded includes the "title" attribute.

    The solution according to the documentation is to send the URL as the Referer header in with the request (and a curl example is given).

    curl -e http://example.com https://vimeo.com/api/oembed.json?url=https:%2F%2Fvimeo.com%2F286898202

    I'm not exactly sure how to build this into the `ResourceFetcher`, but that seems to be the solution for this (if possible).

  • πŸ‡ΊπŸ‡ΈUnited States joegl

    I was able to test sending the request a Referer header and it worked successfully.

    In core/modules/media/src/OEmbed/ResourceFetcher.php starting on line 69:

          $response = $this->httpClient->request('GET', $url, [
            RequestOptions::TIMEOUT => 5,
            'headers' => [
              'Referer' => 'https://MYURL.COM',
            ]
          ]);
    

    I then checked the response with and without the header. With the header it returned the title (and a number of other metadata). It also include the title attribute on the iframe. Without the header it was missing the metadata and had no title attribute on the iframe.

    I will see if I can't work on actual patch/MR with the actual site URL instead of it hard-coded, but I wanted to test the path forward first. This might fit into its own issue at this point because of the specific scenario?

  • πŸ‡ΊπŸ‡ΈUnited States Luke.Leber Pennsylvania

    #68 seems to outline another instance where treating all oembed providers equally simply doesn't work in practice.

    In my mind this adds a lot more weight to the issues floating around that support altering various inputs and outputs of the oembed media system.

    joegl, feel free to open an issue with https://www.drupal.org/project/oembed_lazyload β†’ and we may be able to make this accessibility enhancement available with no code and/or patches for end-users faster than core is able to adapt to the need. πŸ‘

Production build 0.69.0 2024