Drupal 7 - Adding Video to a Page

Here are two ways to insert video into a Drupal page or other content area that uses the HTML editor.

Note:  All videos used on SSU websites must be appropriately captioned.  

Use the HTML Editor's Add Media button.

This is currently the preferred method to add video to a Drupal page.  This works best with YouTube videos.  This method inserts an HTML 5 video player that will resize for mobile resolutions.  It also adds all the player code required for accessibility compliance (it should still be captioned, though).  

Note: This method used to have a bug.  That has now been fixed, so using this method is recommended.

1. Open a web browser tab, locate the YouTube or Vimeo video, and copy the URL.
2. In a separate browser tab, login to your Drupal site, open the desired page and start a new draft.
3. Click in the Body where you want to add the video. You should add it on a blank line.
4. Click the Add Media button.
5. Click Web. If you don't see a "Web" tab, submit a Drupal/Website ticket and create a Change Request that your page's configuration be updated to include the Web option.
6. In the field labeled "File URL or media resource" paste the URL of the YouTube or Vimeo video.
7. Click Next.
8. Click Submit.
9. Save and Publish the page.

 

Use the Share > Embed method.

This is another way to embed video.  However, the video player will have a fixed width and will not resize for mobile displays.  This could cause the page layout to look broken on some pages and mobile devices.

1. Go to your video on YouTube, Google Drive or Vimeo. 
   • Note: If using Google Drive, use these instructions to get the Embed code, then skip to step 5.
2. Click Share.​
3. Click Embed.
4. Click Copy. 
5. Go to your Drupal page where you want to embed the video. Make sure you're logged in and can edit.
6. Click New Draft.
7. Find the place in your content where you want to insert the video. Insert a blank paragraph.
8. Take note of the content above and below - this will help you identify the place to insert the embed code in the next step.
9. Click the Source button - now you'll see the HTML for your page content.
10. Find the blank paragraph you inserted - it will look like this:  <p>&nbsp;</p>
11. Select that blank paragraph code and give the Paste command to replace the blank paragraph with your video code.
12. Click the Source button again to return to the design view.
13. Where you inserted the video you will now see a rectangular block with the word IFRAME. 
14. Double-click on the IFRAME block.  This opens a dialog box.
15. In the Advisory Title field, type (or copy and paste from the video page on Youtube, Google Drive or Vimeo) the title of the video, and click OK.
16. Save and review.
17. If the video displays on the page correctly, publish.