Since the start of lockdown in March, you’ve probably seen way more live streams on social media than you ever had before. These are taking places on platforms like YouTube, Instagram, and Facebook Live.
We recently got a question at a training from an attendee whose organization has been doing more live streams on Facebook. They also use Drupal’s built-in Media module and were wondering how they could embed their recorded live streams from Facebook onto their Drupal site. In today's tutorial, I outline two different methods for pulling this off.
Method 1: Basic HTML Embed
This method isn’t integrated with Drupal’s Media module. The video won’t appear in your Media Library and can’t be referenced and re-used through your site.
However, if you’re looking for a quick solution and don’t need all the magic that Media offers, this might be a good route.
- Go to the video on Facebook
- In the top-right of the page, click the three dots to reveal the drop-down and click Embed
- Copy the HTML code
- Go to your WYSIWYG editor field, click View Source, then paste the HTML code.
Method 2: Drupal Media Module and Remote Video
Out of the box, Drupal ships with the Media module, which has a few different Media Types, including:
- Audio
- Document
- Image
- Remote video
- Video
The difference between Remote video and Video is that the former are videos hosted on third-party platforms, like YouTube and Vimeo. In fact, out of the box, Drupal Media can have a URL from either of those two sites and be playable. Unfortunately, we have to do some work to get other platforms to be playable.
I’ll be showing a module called Media Entity Facebook to get Facebook videos to be embedded. But first: make sure you’ve already enabled the built-in Media module.
OK, let’s go.
Note: the embedded YouTube tutorial was recorded on July 13, 2020. On July 17th, a release of the Media Entity Facebook module was released and this is the recommended solution. You can skip to the 9:05 mark to jump straight to the process of configuring this module.
1. Get the Media Entity Facebook module for Drupal
First, download and enable the Media Entity Facebook module.
2. Create a new Media Type
After enabling, we can create a new Media Type that uses Facebook as a Media source:
- Go to
/admin/structure/media - Click Add media type
- Give it a name and a description, then choose Facebook from the Media Source drop-down
- Click Save
3. Create or modify a media field to handle the Facebook video media type
Now that we have a new Media Type, we can create a field (or modify an existing field) on a content type to use it.
- Add a new field to your content type
- Choose Media from the Field Type drop-down and name your field
- In the list of Media Types, choose the new Facebook media type that you created in the previous step.
4. Change the input widget
After adding a new Media field, the default method of adding the content is via the autocomplete widget. This is silly, and we are going to change this widget to something more sensible.
Go back to editing your content type and click on the Manage form display tab. Find the field field that uses your Facebook video embed and change the widget to use Inline entity form - Simple. This will let your users simply paste the URL of the Facebook video.
Now, when you add content, you can give your media entity a name and paste in just the URL of the Facebook video (not the embed code).
As for your content type, by default it will display several fields you may not need, such as Authored by, Authored on, URL alias, and Published. In the Manage form display menu of your media type, you can drag these fields to the Disabled section.
5. Change the display of field
After saving our content, by default this module just shows the Facebook URL and not the embedded video. To get it to display as an embedded video, we have to change the display type of the Media entity itself:
- Go to
/admin/structure/media/manage/name_of_your_media_type/display - Change the format of your field to Facebook embed
- Click Save
And now, your content should have the Facebook video embedded.
Wrap-Up
The video tutorial and the directions above showed the Media Entity Facebook module being used on a content type. That said, nothing prevents you from creating a new Media Type and using it in Paragraphs.
In fact, that’s exactly how I use it on one of my personal sites. I record live streams and at the end of the week, I post all of the videos recorded into a blog post which is based in Paragraphs.