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

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

• FitVids

  composer require drupal/fitvids

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

• A custom module for YouTube parameter handling Drupal core's oEmbed does not currently support YouTube Embedded Players and Player Parameters. We'll need a custom module to make this happen.

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"
                }
            }
        }

You may then run:

composer require davatron5000/fitvids:1.2.0

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:

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);
}  

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!