Canvas Remote Video

Canvas Remote Video adds a remote video prop shape to Drupal Canvas, so Single Directory Components (SDCs) can accept YouTube and Vimeo videos picked from the Media Library.

Canvas ships prop shapes for images and uploaded video files, but not for externally hosted video. With this module, a component prop that uses the remote video shape gets a Media Library picker in the Canvas editor, limited to Media types that use core's oEmbed video source, such as core's Remote video media type. Content editors reuse videos already in the Media Library instead of pasting URLs into every component.

Features

• A remote_video prop shape that any SDC can use through a JSON Schema $ref.
• A Media Library picker in Canvas, the same experience Canvas provides for images.
• Works with every Media type that uses the oEmbed video source (YouTube, Vimeo, and any other provider you allow), including several such types at once.
• The component receives the video's provider URL as src, so you choose how to render it: an embed iframe, a lite-embed facade, a background video, and so on.
• Provider allow-lists stay under core's control: only URLs from the providers allowed on the Media type can be saved.
• No patch to Canvas is needed: the module ships its own schema.json.
• No configuration: install the module and add the prop to a component.

Requirements

• Drupal 11.3 or later, PHP 8.3 (required by Drupal Canvas)
• Drupal Canvas 1.x
• Core Media and Media Library modules
• At least one Media type using the Remote video (oEmbed) source. Core's Standard install profile includes one.

Installation

composer require drupal/canvas_remote_video
drush en canvas_remote_video

Usage

Add a prop to your component's *.component.yml:

props:
  type: object
  properties:
    video:
      title: Video
      type: object
      $ref: json-schema-definitions://canvas_remote_video.module/remote_video

In Canvas, the prop shows an Add media button that opens the Media Library with your remote video Media items. In your Twig template, the selected video is available as video.src, the provider URL (for example https://www.youtube.com/watch?v=…).

Note: YouTube and Vimeo page URLs cannot be loaded in an <iframe> as they are. Convert the URL to the provider's embed URL in your template or JavaScript, or render the Media entity with core's oEmbed content formatter.

How it works

Canvas resolves json-schema-definitions://EXTENSION.TYPE/NAME from a schema.json file in the root of the named extension. This module's schema.json defines remote_video, and an implementation of hook_canvas_storable_prop_shape_alter() stores that shape as a Media reference field with the Media Library widget. That is the same approach Canvas uses to map its own image shape to Media.

Known limitations

• Canvas does not yet treat schema.json definitions in other extensions as a stable public API, so future Canvas releases may need updates here. Releases are marked alpha until that settles.
• No poster image is provided. Use the Media item's thumbnail in your component if you need one.
• Paste a single video URL per Media item. Playlist parameters are ignored by most embed code.

Similar projects

Canvas itself supports canvas.module/video for uploaded video files. This module covers externally hosted videos, which Canvas does not support yet.

Development sponsored by Specbee.