Embedding Videos on a Web Page

Note: General instructions are listed first, followed by instructions specific to YouTube and Vimeo

To embed a video in a page, separate from Top and Bottom Hero Media Content:

 

General Instructions

  1. On the video-sharing site, go to the video you would like to embed.
  2. Near the video, find and click the Share button.
  3. Find and click on the Embed option. Copy the code that is in the Embed field.
  4. Go back to the page in Drupal where you would like to embed the video. Click New Draft.
  5. In the Primary Body field, click the Source button in the toolbar. Paste the code that you copied in step (3) into the field and add a descriptive "title" attribute to the code (See Step 5). 
  6. Publish and save.  

 

YouTube-Specific Instructions

  1. On YouTube.com, go to the video you would like to embed.
  2. Under the video, click on the Share button.
  3. In the new field that appears, click the Embed button. Copy the code that’s in the Embed field.

  4. Go back to the page in Drupal where you would like to embed the video. Click New Draft.

  5. In the Primary Body field, click the Source button in the toolbar. Paste the code that you copied in step (3) into the field. IMPORTANT: Add a descriptive title attribute to the code. This is required to meet accessibility standards and helps people who use screen readers to understand what information the video is conveying. 

Example:

<iframe title="Video about accessibility guidelines" width="560" height="315" src="https://www.youtube.com/embed/2ma44vyMOs8" frameborder="0" allowfullscreen></iframe>

Image of Primary Body with example code for adding title to iframe6. Publish and save.  

 

Vimeo-Specific Directions

  1. On Vimeo.com, go to the video you would like to embed.

  2. On the top right-hand side of the video, click on the button that looks like a paper airplane. It should say “Share” when the mouse hovers over it. 

  3. A new window will pop up. Copy the code that’s in the Embed field.

  4. Go back to the page in Drupal where you would like to embed the video. Click New Draft.

  5. In the Primary Body field, click the Source button in the toolbar. Paste the code that you copied in step (3) into the field. IMPORTANT: Add a descriptive title attribute to the code. This is required to meet accessibility standards and helps people who use screen readers to understand what information the video is conveying. 

​Example: 

<iframe title="Video about accessibility guidelines" src="https://player.vimeo.com/video/722122" width="640" height="483" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/722122">An introduction to web accessibility</a> from <a href="https://vimeo.com/user378578">Paul Boag</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

6. Publish and save.