Full-width, Drupal core Remote Video with YouTube parameters
James Candan
Posted on January 5, 2023
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!
Posted on January 5, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.