Drupal 8-Brightcove Connector: Embedding Content

Role(s)
Studio User
API Developer

Introduction

The Drupal-Brightcove Connector allows you to manage Brightcove Video Cloud videos and players within Drupal, and easily embed videos in Drupal pages. Note that this is for Drupal 8. For Drupal 7, see Drupal 7 instructions.

Note: this document assumes that Brightcove has already been installed and configured for Drupal. If you have not done so already, go back and Install and Configure the Brightcove extension first.

While this page will focus on how to add Brightcove videos to Drupal content, the same steps can be followed to add Playlists.

Add Brightcove Video Field

The first step in including Brightcove videos in any Drupal content type is to add a video field to the new content page. To do so, first navigate to Structure and select Content Types.

Click on structure, then click on content types.

Then, choose the content type you would like to be able to include Brightcove videos in and select Manage fields. You may do this for as many content types as you need.

Select manage fields.

From there, click the Add Field button at the top.

Click on the big blue button at the top.

You will be taken to the Add Field page. Select Reference/Other.

The 'other' option within Reference.

Give your field a label, then click Save and Continue.

Brightcove Video is a good label, but there are other options.

On the next screen, in the Type of item to reference field, choose Brightcove Video. If you are instead trying to embed playlists, choose Brightcove Playlist. The Allowed number of values should be unlimited.

Choose what item you want the field to reference.
Unlimited value.

Now, if you navigate to the Add Content and select the type of content you have just added a Brightcove Video field to, you will see a Brightcove Video option below the text box.

By default, the field works through autocomplete. Start typing the name of a video and it should pop up.

Autocomplete video names.

This is a fine method of selecting videos when you know the specific title of the one you want, but it's not very convenient for browsing. For easier video selection, we need an entity browser.

Create Entity Browser

To start with, navigate to the Extend section and find the Entity Browser module. Select the checkbox, and click install. The easiest way to locate the module is to start typing the name in the search bar.

Select entity browser and click install.

Next, set up a custom view to browse videos. Click on the Structure tab, then click on Views.

Navigate to the views page.

Click Add View. This will take you to the Add View page. Give the view a name, then select Brightcove Video from the View settings menu. Click Save and Edit.

Brightcove video view selected.

Next, click the +Add in the Displays section and select Entity Browser. Then hit Save.

Make an entity browser.

For format, choose Table by clicking on the default option and selecting Table.

Now, it's time to add in fields for the browser. Make sure it says Entity Browser in the corner. You should be automatically switched into it after having selected it.

To add fields, click the Add button next to the Fields header. Fields can largely be a matter of taste, but be sure to have the Brightcove Video: Entity browser bulk select form as an option so that videos can be selected. Name and thumbnail are also good to have. The one field it is very good to not have is the one they put in by default: the Rendered Entity. The Rendered Entity is the full video and all meta information, and including it in the entity browser. This makes it bulky and less useful for quickly browsing videos.

Suggested field selections, plus where to click to make it happen.

Don't forget to hit Save.

Now, you need to set up the entity browser . To do this, first enable the Chaos Tools suite if you have not already.

Use the search box to find as usual.

Navigate to Configuration and select the Entity Browser option.

Navigate to the Entity Browsers page.

On the resulting page, click Add Entity Browser at the top. On the resulting page, add a label for your new widget, then make your selections. For now, a Modal display plugin, a single widget, and no selection display will work fine.

Navigate to the Entity Browsers page.

Hit next. The next few pages either have fine default options or no options. Continue until you reach the final screen, which has the word Finish at the bottom instead of next. Select View in the Add widget plugin menu, then give your widget a label. In View Display, select Brightcove Video Browser: Entity browser.

Navigate to the Entity Browsers page.

The next step is to make sure the browser is accessible from the Add Content page.

Add Browser To New Content Page

Navigate to Content types in the Structure section again. This time, click on the arrow on the side of the operations field of the desired content type, then select Manage form display.

Manage form display.

In the Brightcove video field, click the drop down and select Entity Browser instead of Autocomplete. There is currently no entity browser selected. To change that, click on the settings icon. Select your Brightcove video browser, then hit Update.

How to select entity browser and get into settings.
fill out form options.

Your widget is now set up! When you go to the corresponding Add content page, you'll see the option to select videos in the Brightcove field rather than using autocomplete.

videos selected.

But perhaps you want to upload videos straight from the new post screen. The good news is: we can add a tab for that.

Add An Upload Tab

While browsing videos is an important task, you also might want to upload new videos from the same page that you use to post. To do that, you can add an Upload tab to the entity browser. First, though, you need the Entity Browser IEF (Inline Entity Form) submodule. Navigate to Extend to find it.

Select entity browser IEF and click install.

Then, on the Configuration page, select Entity Browsers under the Content Authoring header.

Navigate to the Entity Browsers page.

You should already have an entity browser set up from before. Hit Edit to update it.

Edit Entity browser

Change the Widget selector plugin from Single widget to Tabs.

Change widget selector plugin.

Hit next until you get to the last configuration page (the one with Finish at the bottom). In the Add widget plugin dropdown menu there is now an Entity Form option.

Select add widget plugin entity form option.

This will add a form below the first form. Add a label and select Brightcove Video for the Entity type and Bundle. Hit Finish.

fill out form options.

However, there are still a few problems with this approach. The biggest one is that this does not lead to embedded videos, just ones that are included with the post. It also would be nice to have a smaller, more convenient button right in the editor. Fortunately, you can fix both of these problems at once.

Embedding Videos

First, you need to enable the Entity Embed and Embed modules, as well as the CKEditor module, if you don't already have it.

Embed and Entity Embed.

Now, navigate to Configuration. In the Content Authoring section, select Text editor embed buttons

Text editor embed buttons

Click Add embed button. Give your button a label, select Entity for the embed type and Brightcove Video for the entity type. Your Entity browser should be the browser you already created for Brightcove content.

fill out form options.

Also, if you want an icon, you'll need to upload it here, otherwise it will just be the default button icon. Here is a small Brightcove logo icon you can use.

I made this tiny icon so you don't have to.

Now, return to Entity Browsers on the Configuration page. Choose Edit for your browser widget, and change the Display plugin to iFrame. Drupal 8 cannot currently handle multiple modal calls, so to embed videos with CKEditor, it must be iFrame.

iFrame selection.

Click through the Next options without changing anything, and then hit Finish.

Now that that's set up, head back to Configuration and choose Text formats and editors.

Text formats and editors.

Choose to configure the text format where you want to add the entity embed button. Keep in mind that when posting, you will have to make sure to use this text format, or add the entity embed button to more formats.

I used basic, but any work.

Make sure CKeditor is selected for the Text editor. Your new Brightcove button will be listed in the Available buttons, and can be dragged to the Active toolbar.

fill out form options.

Make sure Display embedded entities is selected, and click Save configuration.

Now navigate to the Add content page. Make sure the correct text format is chosen, and click your button!

But there's still one catch. When you select your video, it only gives you two display options, and neither is correct.

Not good choices.

Displaying the entity ID or just a label will not give you an actual video. To do that, you need to add a new view.

Add Brightcove View

First, create a new view. To do that, go to the Structure page and select Display modes. Then click on View modes.

Structure then display modes.

Click Add a new view. Choose Brightcove Video as the view mode entity type. Give your new view a label and hit Save.

Choose view mode entity type.
Brightcove view mode.

You should now see a view listed under Brightcove Video.

Brightcove video view.

Next, enable the new view mode. Go to Brightcove Video settings in the Structure menu, then select the Manage display tab. At the bottom, there is a Custom display settings box. Select your new custom view and hit Save.

custom brightcove video view enabled.

Finally, clear your cache by navigating to Performance in the Configuration menu, and clicking Clear all caches.

clear caches.

Now you should be able to select Brightcove Video as the view to display!

Embed as video

Also check out content management with Drupal.