Full-width, Drupal core Remote Video with YouTube parameters
Published: 2023-01-05 05:52:50

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](https://www.drupal.org/project/drupal/issues/3218217) support [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/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:

```json
        {
            "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](https://www.drupal.org/project/fitvids/issues/3158833) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbwbbxs0mz7n6jxeso9j.png)

### Handle YouTube Parameters

Add this to a custom `.module` file.

```php
<?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!