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.

screenshot wysisyg


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

NOTE: If the WYSIWYG doesn’t have that icon, you will be unable to embed a video in it.


screenshot wysisyg toolbar buttons

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”

screenshot media select

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

screenshot video add new screen

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.

screenshot file finder on laptop


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


screenshot video add new screen fields

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.


screenshot video add new screen fields


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


screenshot video add new screen fields


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


screenshot media review item


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.


screenshot video caption


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.


screenshot wysiwyg video display

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.


screenshot wysiwyg video edit


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


screenshot video caption


By clicking on the file name, you can edit the video. NOTE: Only do this for a video you created!

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


screenshot 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.


screenshot video caption


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


screenshot video cover photo update


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

screenshot video display


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”

screenshot video browse library embed


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


screenshot video browse library embed


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.


screenshot video caption


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.


screenshot video display


Please note that not all videos in the library have images

You can see what it looks like in the WYSIWYG


screenshot video without image


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


screenshot video without image display

If you encounter this, please contact Communications so that they can edit the video.  If you really want to use it without an image, make sure it is in it’s own WYSIWYG so it won’t display in an odd way as seen above.

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

Note: You must have the Embed role before proceeding.

If you don’t have the Embed role, please contact Communications for help with placing your video. 

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

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

We care about the captions – so the “Show Captions” box should be checked as the default and viewers can turn them off if they need/choose.

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 panopto iframe captureScreenshot 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.

screenshot flex content items


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


screenshot embed field with code


Drag the Embed to be in between the two WYSIWYG


screenshot flex content items


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


screenshot video display

Can’t find your video?

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

Please Note: Only uploaded videos such as YouTube or Vimeo will be found here.

The Panopto videos you place in the Embed Flexible Content Items are unique to that embed instance and the page in which it is embedded.

If you want a single Panopto video to appear on multiple pages, please contact Communications to assist you with an In-Context block placement of that video.

screenshot media view page

 

Still need Drupal help? Have more Drupal questions?

If after reading this article or watching the training videos you still have questions, we can help!

Sign-up for any of our Drupal Drop-ins throughout the year. 

Schedule a Drupal training session for you or your whole department with our Drupal Trainer.

Questions?

If you have any additional questions or problems, don't hesitate to reach out to the Help Desk!

Phone: 610-526-7440 | Library and Help Desk hours
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor