Drupal - Intermediate: Videos in Drupal

Adding Video in Drupal

Adding a YouTube or Vimeo video  can be done by embedding directly in the WYSIWYG Editor. 

Adding a Panopto video requires you to use an Embed Flexible Content item. Read more about the Embed item in our FLEX:  Basic 2 article.

YouTube and Vimeo

Remote Video allows you to associate a URL of the video with a Cover Image to display either a YouTube or Vimeo video. YouTube and Vimeo are the only hosted video providers that can be added to WYSIWYGs in the new site. For other providers, such as Panopto, please see Other Hosting Providers below.

Embedding Video in WYSYWYG

Usually you will embed videos within the WYSIWYG of a Basic Page or News article. Adding a YouTube or Vimeo video can be done by embedding directly in the WYSIWYG Editor.  

When creating or editing your Basic Page or News article, locate the point in your text where you wish to embed the video.

Place your cursor there and then in the WYSIWYG toolbar, select the Video Embed icon. 

Video Embed icon has the play button

 Upon clicking the Video Embed icon, a pop-up window will appear to “Select media item to embed”. There will be two tabs at the top: “Browse Library” and “Add New”

Adding a New Video 

If we click the Add New tab we will see a form to fill out to add the video item to the library

The name field is required.  It is important to name your video clearly, but succinctly.

The next field is the Cover Image. This requires you to choose a still image that will represent the video.  It can be a still from the video, or it could be a photo that embodies the essence of the video’s subject matter.  Clicking “Choose File” will open your computer’s File Browser Finder so that you can locate and click on the correct image.

Once you’ve selected the file and clicked “Open” a thumbnail will appear in the Video form and you will encounter a required Alternative Text field

Y

ou must fill out the Alternative text to comply with our Accessibility Standards.

The next field that you will need to fill in is the URL field.  This is the address of the YouTube or Vimeo video.

Scrolling down, you will see that the rest of the fields have defaults that can be left.  Press the Save & Embed button.

Next you will get an additional popup that wants you to check your selection.  This is your chance to replace it or continue

Press Replace Selection to start over.

Press Next to continue.

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Editing the video you just created

If you don’t like the cover image or something about the video, you can edit it by first, editing the page, then editing the WYSIWYG. Then scroll to find your video and right-click to see the “Edit Video” button.  You can also double-click on the video to edit it.

This will bring up a simple popup with the file name of the video

Clicking on the file name will open a new browser window with the video edit screen.

We would like to pick a new cover image.

By clicking the “Remove” button next to the image filename, we will remove it from the Remote Video and our library.

We can now upload a new one by clicking “Choose File” and selecting a new one from my computer.

Once we are satisfied with our changes, we can scroll down and press Save.  This will keep us in that new browser window. We can close out of it and the browser window with my page editing will still be open.  It will still have the  popup open with the video filename. Since we just edited it, we can press “Embed” and it should update.

We can see that it updates the cover photo in the WYSIWYG.

Saving the page now will let us confirm that our Remote Video object looks better.

Back to Top ^

Browsing the Video Library

Upon clicking the Video Embed icon, a pop-up window will appear to select media item to embed. There will be two tabs at the top: “Browse Library” and “Add New”

If you scroll down you can see that the “Browse Library” tab has a pager and an Embed button.

Once you have made your selection, press the “Embed” button

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Please note that not all videos in the library have images

You can see what it looks like in the WYSIWYG

And if we press save, you can see what it looks like on the page

One other option to display a video is to have it be part of the Feature Large and Feature Medium Flexible Content Items.

Back to Top ^

Panopto 

The only way to add video from other hosting providers, such as Panopto, is by adding it as an iframe via the Embed Flexible Content Item.

Adding Video via Embed Flexible Content

Copy the embed code from Panopto (or other video hosting site).

In Panopto, there are a few options to check, if desired. 

Here’s a link to the Panopto doc with a video tutorial and details on all of the options: https://support.panopto.com/s/article/Embed-a-Video

Screenshot example of getting iframe code from Panopto. NOTE: “Show Captions” is checked.

Edit the Drupal page you want to add the video to.

Locate the point in your text where you wish to embed the video. If it is in the middle of the WYSIWYG, you will have to add another WYSIWYG then cut the text that should follow the video from WYSIWYG pre-video and paste into the WYSIWYG that should be post-video.

Then, add an Embed Flexible Content item and paste the iframe code into it.

Drag the Embed to be in between the two WYSIWYG

Save the page to see if the video is displayed as expected.

Can’t find your video?

Go to Content, select the Media tab and filter by Type=Remote Video to see all available videos.