Add a Video

Owned by Rachel Klingler
Last updated: Apr 13, 2020
3 min read



Embed a video from an external site like You Tube to help illustrate or explain.



Basic Steps

  1. Navigate to the video you want to embed on You Tube or Vimeo. Copy the URL of the video. (ex/ https://www.youtube.com/watch?v=1c06xOF4uQ8) 

  2. Using the Classic Editor (or a rich text module in Zuse Create), position your cursor where you would like to add the video on the page.

  3. In the editor, make sure you have the paste as text option selected.

  4. Paste the URL of the video into the editor. Make sure it doesn't become a link (it will display in blue text and be underlined). If it becomes a link, click on the link and choose the Unlink button.

  5. Make sure your URL is on it's own line with no other spaces.

  6. If the URL is non-secure (http://), add an "s" to make it secure. (https://). Since our site is secure it will only load other secure content. 

Options

Disable "Related Videos" at the end of the You Tube clip

You can use the youtube shortcode to disable the related videos from appearing when the clip finishes. Instead of just copying the URL as above, use the youtube shortcode with &rel=0 appended to the URL. Make sure that the URL does not become a link, if it does, use the unlink button. 

[youtube=https://www.youtube.com/watch?v=1c06xOF4uQ8&rel=0]

Embed a Video Responsively

By default, videos will embed at a set size. Often, this size is too small. To make the video stretch across to fill the width of the page (no matter the size of the page), add the following code around the code you are using to embed the video. If the aspect ratio of your video is 4:3, replace embed-responsive-16by9 with embed-responsive-4by3.

<div class="embed-responsive embed-responsive-16by9">[vimeo 134139280]</div>

Left-Align a Video

By default, embedded videos are centered on the page. This looks good on blog or news posts, but sometimes doesn't look as good on a page. To force a video to left-align, surround it with a div:

<div style="float:left;">[youtube https://www.youtube.com/watch?v=dk79w7ZUb0U]</div>

Troubleshooting

If your video does not appear correctly (you only see the URL), select the text editor and make sure that the URL is on a line by itself. Delete any formatting (like a <div>).

Often, Wordpress changes <iframe> tags, or video URLs to shortcodes. This is usually okay. If this is causing you issues, please reach out to the Web Team.

Video Embed in Tabs

To embed a video in a tab module, you must use the shortcode: