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.
- Open a web browser tab, locate the YouTube or Vimeo video, and copy the share URL.
- In a separate browser tab, login to your Drupal site, open the desired page and start a new draft .
- Click in the Body where you want to add the video. You should add it on a blank line.
- Click the Add Media button.
- Click Web. If you don't see a "Web" tab, contact the Web Office and request the configuration be updated to include the "Web" option.
- in the field labeled "File URL or media resource" paste the URL of the YouTube or Vimeo video.
- Click Next.
- Click Submit.
- 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.
- 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.
- Click Share.
- Click Embed.
- Click Copy.
- Go to your Drupal page where you want to embed the video. Make sure you're logged in and can edit.
- Click New Draft.
- Find the place in your content where you want to insert the video. Insert a blank paragraph.
- Take note of the content above and below - this will help you identify the place to insert the embed code in the next step.
- Click the Source button - now you'll see the HTML for your page content.
- Find the blank paragraph you inserted - it will look like this: <p> </p>
- Select that blank paragraph code and give the Paste command to replace the blank paragraph with your video code.
- Click the Source button again to return to the design view.
- Where you inserted the video you will now see a rectangular block with the word IFRAME.
- Double-click on the IFRAME block. This opens a dialog box.
- 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.
- Save and review.
- If the video displays on the page correctly, publish.