How to Embed ANY Remote Video using Drupal 9’s Media Manager

Updated May 1, 2023 (the instructions changed with Drupal 10)

I love the media manager in Drupal 9 (and 10) that is no secret, anyone who’s taken my training over the last year has been inundated with my praise of the media manager in Drupal 10 and the fact that you can build a digital asset management system with it. You can really do some amazing things with file replacement, even with embedded pdfs and more etc..

However, there’s been one thing missing and it’s in the area of remote video. How can I embed something besides YouTube and Vimeo videos?

I want to show you exactly how you can embed something other than YouTube and Vimeo, and it’s called oEmbed Providers. You can find it at www.drupal.org/project/oembed_providers.

Download and install it or install it via composer as you would any other module.

Step 1:

Once the module is installed,

1. Go to Configuration -> Media -> oEmbed Providers -> Provider Buckets.

You will see 3 tabs at the top of this page: General, Custom Providers, and Provider Buckets. The General tab shows every oEmbed provider that has been authorized to work with Drupal. The Custom Providers tab has a list of any providers that you have created.

Go ahead and enable Vimeo, YouTube, and TED.

You do need to select YouTube and Vimeo (if desired), because you are creating a completely new provider.

2. Call your new Provider “Remote Videos”.

If you want to add your own custom providers, you can do that in the Custom Providers tab by clicking on the blue +Add oEmbed provider button.

NOTE: You can uncheck the Enable external fetch of providers link located on the General tab and that will provide only the custom providers you want.

We have total customization, but for the purpose of this blog, I have kept the general settings, because I like the ease of that.

Step 2:

1. Create a new Media Type – Hover on Structure -> Media Types

3. Click Add Media Type

4. Add a Name and select the Media Source you created in the last step.

5. Click the save button at the bottom

6. Click Structure->Content types->Article->Manage Fields.

7. Add a media field and select Remote Videos.

8. Add a couple of nodes: 1) YouTube video, and 2) TED video. In the media field, click add Media and paste the url to either TED, Vimeo, or YouTube. Click Save.

  1. Click insert selected
  2. Click save

The YouTube video has been embedded.

Be sure to watch the YouTube video for this blog:

Author

  • Rod Martin

    Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations. His extensive open source experience includes WordPress, Joomla and Drupal and he really knows how to help you get the most out of the system you chose. Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.

0 0 votes
Article Rating
Subscribe
Notify of
3 Comments
Oldest
Newest
Inline Feedbacks
View all comments
devmxdrupal
1 year ago

hello thank you for sharing this valuable information, I just want to ask something. I tried all steps but at the end I got this message:

chromewebdata/:1     Failed to load resource: the server responded with a status of 404 ()
18:04:50.244 chromewebdata/:1 Refused to display ‘https://www.youtube.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
18:04:50.244 chromewebdata/:1 Refused to display ‘https://www.youtube.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

I was wondering if there is any tip you can share about this 🙂 thank so much 🙂

3
0
Would love your thoughts, please comment.x
()
x