Adding Video in Drupal
Adding a YouTube or Vimeo video can be done by embedding directly in the WYSIWYG Editor by utilizing our Remote Video widget.
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 (like a still from the video, or an image relating to the topic of the video, or just a Campus Beauty photo) to display either a YouTube or Vimeo video.
YouTube and Vimeo are the only hosted video providers that can be added to WYSIWYGs via the Remote Video widget.
For other providers, such as Panopto, please see Other Hosting Providers below.
Embedding Video in WYSYWYG (YouTube or Vimeo)
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 via the Remote Video widget. 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.
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.
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.
NOTE: If the WYSIWYG doesn’t have that icon, you will be unable to embed a video in it.
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
You 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.
In order for the video player to display properly you must fill in some text in the caption. This caption is helpful for the visitor to understand why they should watch the video.
Once you have set your caption, press Embed. This will bring you back to the content entry form.
Here is what your video embed will look like in the WYSIWYG editor
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 click on it to see the Video Dialog, then click on the pencil icon to edit the video.
This will bring up a simple popup with the file name of the video
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.
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.
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.
One problem you may encounter is if you forget to put a caption on a video. Let's edit the video we just put in and see how it looks without a caption.
As you can see it isn't terrible, but it certainly isn't so interesting that someone would stop to watch it.
Another problem you may encounter is a video without a Cover Image. 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
As you can see, it completely messes up the display of the page.
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.
Another option to display a video is to have it be part of the Feature Large and Feature Medium Flexible Content Items.
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.
If you have been granted Embed permissions, you may use these instructions to embed video.
If you don’t have this permission but would like to request it, please reach out to help@brynmawr.edu or communications@brymnmawr.edu for assistance.
Only embed content from known, trusted sites. Ask Web Services if you aren’t sure.
Please use caution and get any code you don't fully understand vetted by Web Services before publishing on the website.
The Embed Flexible Content Item should only be used for specific code-related embedding needs.
It is an extra level of permission. If you don’t have that level of permission, you will see something like this:
If you do have permission to use that Flexible Content Item, you would see a non-WYSIWYG text box appear. In this example, we will have pasted in the WuFoo embed code so a form will appear on the page.
First step is to copy the embed code from the source. 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 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 that the video is displayed as expected.
Can’t find your Remote Video?
Go to Content, select the Media tab and filter by Type=Remote Video to see all available videos.
Please Note: Only Remote 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.
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. 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 hoursStill need Drupal help? Have more Drupal questions?
Questions?
Email: help@brynmawr.edu | Service catalog
Location: Canaday Library 1st floor
