API Parameters on remote video (youtube) not working entirely

Created on 25 February 2022, almost 3 years ago
Updated 30 November 2023, about 1 year ago

Hello folks,
i am currently working on a project and experiencing following issues with embedding external oembed youtube content:

Problem/Motivation

I want to give editors of my project the ability to add external youtube videos from their youtube account as a full width header slider. I got all set up: A configured media content type with the oembed youtube provider, a header field in my basic page and a view that uses blazy for the slider elements. The slider and all slider elements are working as expected and even my youtube video is being displayed correctly but i have big problems adding the youtube api parameters i need for a good user experience.

I simply add the parameters to the link of the remote video content, e.g.: https://youtu.be/VID_ID?param1&param2 [...]

First take a look at the available parameters here: https://developers.google.com/youtube/player_parameters

I want to archieve following functionality:

Autoplay
-> working on my site with the "?mute=1&autoplay=1" parameters

Loop
-> not working with the "?loop=1", "?playlist=VID_ID&loop=1" or "?version=3&playlist=VID_ID&loop=1" parameters as suggested at https://developers.google.com/youtube/player_parameters#loop

Hide Controls
-> not working with the "?rel=0" parameters.

Hide YouTube Account and video title
-> not working with the "?showinfo=0" parameter

Hide "display similiar videos" at the end of the video
-> not working with "?rel=0" parameter

I tried "&" between the parameters instead of just "&" as suggested on some issues on stackoverflow with no effect.

I also tried manipulating DOM and template files for manually appending the correct parameter to the youtube link but this seems to be not possible due drupals oembed security.

Steps to reproduce

1. Create remote media element with default youtube oembed provider
2. Create remote media content with youtube url + api parameters
3. display media content on basic page

I use following remote video URL for testing: https://youtu.be/J9r5RBkl-X0?version=3&playlist=J9r5RBkl-X0&autoplay=1&controls=0&disablekb=1&loop=1&rel=0&showinfo=0&mute=1

I hope someone experienced the same problem because i couldnt find anything on this particular problem.

Thanks in advance

πŸ› Bug report
Status

Closed: works as designed

Component

Code

Created by

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 kwfinken Lansing, MI
  • πŸ‡¬πŸ‡§United Kingdom newaytech

    Hi there - I'm getting an exact same issue with Vimeo URL parameters. I've put together the following code so far for Vimeo - and it's working - but I can't figure out where the "app_id" value is set - so feel the solution is fragile.

    function neway_barrio_sass_preprocess_media_oembed_iframe(array &$variables)
    {
      $url = Drupal::request()->query->get('url');
      $params = UrlHelper::parse($url)['query'];
      // Take each param and add together to make a param list separated by &
      $query = http_build_query($params);
    
      kint($url);
      kint($params);
      kint($query);
    
    
      $original = $variables["media"]->__toString();
      kint($original);
      if (!empty($params)) {
        $original = str_replace('?app_id', '?' . $query . '&app_id', $original);
      }
      kint($original);
    
      $variables["media"] = IFrameMarkup::create($original);
    }

    Hoping someone from the community can chime in with some insight. I'm going to explore "hook_oembed_resource_url_alter" next...

    Usning Drupal 10.3.6

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

    Hi @newaytech - I ran into a similar issue here with Vimeo and thought I'd put my solution in here.

    I decided to use regex inside mytheme_preprocess_media_oembed_iframe(). It makes some assumptions, such as the app_id query parameter will always be there, so you might want to do some sanity checks. I haven't had time yet.

    It works on a Vimeo URL like https://player.vimeo.com/video/xxxxxxxxxx?app_id=xxxxxx

    function greene_preprocess_media_oembed_iframe(&$variables) {
      $original = $variables['media']->__toString();
    
      /** @var \Drupal\media\OEmbed\Resource $resource */
      $resource = $variables['resource'];
    
     if ($resource->getProvider()->getName() === 'Vimeo') {
        $original = preg_replace('/(.*)(\?app_id=\d+)(.*)/', '$1$2&muted=1&autoplay=1$3', $original);
        $variables['media'] = \Drupal\media\IFrameMarkup::create($original);
     }
    }
    

    This applies the muted and autoplay params needed to make the video loop.

Production build 0.71.5 2024