DEV Community

James Candan
James Candan

Posted on

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!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay