Enabling Georgia Tech MediaSpace as an oEmbed Provider in Media

Category
Developers
Site Administrators
Drupal Version
Drupal 10

Scott Jacobson, Desmond Gardfrey, and Eric Sembrat were able to get Georgia Tech's MediaSpace working as an oembed provider for Drupal media.  Below is the method they developed.

  1. Add the OEmbed Providers module

  2. Add a custom provider (/admin/config/media/oembed-providers/custom-providers). The provider name must be entered as MediaSpace @ Georgia Tech with the '@' symbol in the middle.

    Provider Name: MediaSpace @ Georgia Tech
    Provider URL: https://mediaspace.gatech.edu
    Endpoint #1 - Endpoint schemes: https://mediaspace.gatech.edu/id/*
    Endpoint #1 - Endpoint URL: https://mediaspace.gatech.edu/oembed
    Endpoint #1 - Discovery: (Select this checkbox)
    Endpoint #1 - Available formats: JSON (Select this checkbox)

    ''

  3. Add a provider bucket (/admin/config/media/oembed-providers/buckets)

    • Check the option Allowed Providers "MediaSpace @ Georgia Tech"

  4. Add a media type of MediaSpace @ Georgia Tech (/admin/structure/media/add)

    • Select Media source MediaSpace @ Georgia Tech and select the Save button.  The field mapping is unnecessary unless you want to override something.

  5. Add your oEmbed media link to a Media type (/media/add/)

  6. To add Media within CKEditor:

    • Add the "insert from media library" button to one of the CKEditor toolbar text formats (/admin/config/content/formats)

      • Make sure that the embed code is wrapped in CSS like <div class="video-container"></div> when entered via CKEditor.

    • Add the following CSS via your custom theme or a custom module: 
      .video-container { position: relative; overflow: hidden; width: 100%; }
.video-container::after {​​​​​​​ display: block; content: ""; padding-top: 56.25%; }​​​​​​​
.video-container iframe {​​​​​​​ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }​​​​​​​

  7. You could also make a custom block type with a TWIG file, wrapping the embed in <div class="video-container"></div> and adding the above CSS to your custom theme or a custom module.

  8. To Be Determined:  How to add the MediaSpace @ Georgia Tech provider to the custom block types Call to Action and Video Embed.  (Editor's note: This should be doable by modifying the existing media types used by those blocks and adding the provider as an Allowed Provider.)