Full-width, Drupal core Remote Video with YouTube parameters

jcandan

James Candan

Posted on January 5, 2023

Full-width, Drupal core Remote Video with YouTube parameters

Drupal core supplies us a Remote Video media type. To display Media items of this type in a block, full-width, with desired YouTube parameters, you'll need the following.

Note: This was tested on Drupal 10 in January 2023. The latest FitVids library release is 1.2.0.

Overview

Modules

  • Entity Block
  composer require drupal/entity_block
Enter fullscreen mode Exit fullscreen mode

Entity Block will allow you to add Remote Videos to a Layout Builder section block.

  • FitVids
  composer require drupal/fitvids
Enter fullscreen mode Exit fullscreen mode

The FitVids module relies on a package that detects video embeds and widens them to fill their respective HTML container.

Tips and Additional Bits

FitVids Library

The FitVids module will require you to have the FitVids library. This has not been released to Packagist. So, we'll need to specify a special package repository in Composer.

To get the FitVids library, add this to your composer.json, within your repositories list:

        {
            "type": "package",
            "package": {
                "name": "davatron5000/fitvids",
                "version": "1.2.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/davatron5000/FitVids.js.git",
                    "type": "git",
                    "reference": "v1.2.0"
                },
                "require": {
                    "composer/installers": "^2.0"
                },
                "extra": {
                    "installer-name": "fitvids"
                }
            }
        }
Enter fullscreen mode Exit fullscreen mode

You may then run:

composer require davatron5000/fitvids:1.2.0
Enter fullscreen mode Exit fullscreen mode

FitVids oEmbed Patch

Add the Not applying to oEmbed videos patch (as of this writing, tested successfully with comment #2's patch).

Configure FitVids for youtu.be

FitVids doesn't recognize the https://youtu.be embed URL, but the module allows us to fix that.

Simply add a FitVids setting for custom vendor:

Image description

Handle YouTube Parameters

Add this to a custom .module file.

<?php

/**
 * @file
 * Helper module for Media oEmbed YouTube player parameters.
 *  
 * @see https://www.drupal.org/project/2788249/issues/3266590
 */ 

use Drupal\Component\Utility\UrlHelper;
use Drupal\media\IFrameMarkup;

/**
 * Implements hook_preprocess_HOOK().
 */ 
function HOOK_preprocess_media_oembed_iframe(array &$variables) {
  $url = \Drupal::request()->query->get('url');
  $params = UrlHelper::parse($url)['query'];
  $query = http_build_query($params);

  $original = $variables["media"]->__toString();
  if (!empty($params)) {
    $original = str_replace('feature=oembed', 'feature=oembed&' . $query, $original);
  }

  $variables["media"] = IFrameMarkup::create($original);
}  
Enter fullscreen mode Exit fullscreen mode

Conclusion

This produced a clean implementation of remote video for full-width, YouTube videos with parameters. This has not been tested on Vimeo or other providers. I hope you've found this helpful.

Cheers!

💖 💪 🙅 🚩
jcandan
James Candan

Posted on January 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related