| Excerpt |
|---|
Embed a video from an external site like You Tube to help illustrate or explain. |
| Table of Contents |
|---|
...
...
Basic Steps
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)
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.
In the editor, make sure you have the paste as text option selected.
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.
Make sure your URL is on it's own line with no other spaces.
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.
| Code Block |
|---|
[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.
| Code Block |
|---|
<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:
| Code Block |
|---|
<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:
| Code Block |
|---|
[youtube URL-HERE] |