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.
- Click insert selected
- Click save
The YouTube video has been embedded.
Be sure to watch the YouTube video for this blog:
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 🙂
Hi devmxdrupal,
so as you might have guessed, this tutorial is now out-of-date. OSEmbed changed significantly with Drupal 10 and they changed how to use it for D9 as well.
I’ll update the blog post and let you know when it’s ready to go. Sorry I missed your comment till just now. (I do cover this and a lot of other topics in the Media class – (https://ostraining.com/courses/the-ultimate-guide-to-the-media-module-in-drupal/)
Rod
This blog post is now slightly out of date.
When you install the module, go to Configuration -> Media -> OEmbed Providers -> Provider Bucks.
Create a new bucket and select the providers you want to use.
Go to Structure -> Media Types -> Add New Media Types. I called mine “Remote Videos”. Select the Media Source you created above, select the Allowed Providers and click Save.
You may now insert any video into the NEW Media Type. It does NOT add to the default Remote Video media type – you MUST create a new one.