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.
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.
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.
From there, click the Add Field button at the top.
You will be taken to the Add Field page. Select Reference/Other.
Give your field a label, then click Save and Continue.
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.
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.
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.
Next, set up a custom view to browse videos. Click on the Structure tab, then click on Views.
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.
Next, click the +Add in the Displays section and select Entity Browser. Then hit Save.
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.
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.
Navigate to Configuration and select the Entity Browser option.
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.
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.
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.
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.
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.
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.
Then, on the Configuration page, select Entity Browsers under the Content Authoring header.
You should already have an entity browser set up from before. Hit Edit to update it.
Change the Widget selector plugin from Single widget to Tabs.
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.
This will add a form below the first form. Add a label and select Brightcove Video for the Entity type and Bundle. Hit Finish.
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.
First, you need to enable the Entity Embed and Embed modules, as well as the CKEditor module, if you don't already have it.
Now, navigate to Configuration. In the Content Authoring section, select 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.
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.
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.
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.
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.
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.
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.
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.
Click Add a new view. Choose Brightcove Video as the view mode entity type. Give your new view a label and hit Save.
You should now see a view listed under Brightcove Video.
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.
Finally, clear your cache by navigating to Performance in the Configuration menu, and clicking Clear all caches.
Now you should be able to select Brightcove Video as the view to display!
Also check out content management with Drupal.