Note: All videos should be uploaded to a video hosting location other than on our Drupal sites. Drupal is not designed to host videos and sites like YouTube and Vimeo have much better accessibility, especially across mobile and tablet devices.
Add Videos
Place your cursor where you want to insert the YouTube or Vimeo video.
Click on the iFrame Embed icon the right-hand side of the editing bar.
That will bring up the iFrame Properties pop-up box.
In the Advisory Title box, enter in the word Video. You can also enter in the title of the video.
Add YouTube Video | Add Vimeo Video
YouTube Videos
To add a YouTube video, go to the YouTube page. Click on Share below the title of the video.
That will give you a menu for Share, Embed, and Email. Click on Embed.
A line of HTML code that begins with <iframe will appear. In the line of code, highlight the web address for the YouTube site that is located there. Start with https://www.youtube.com/embed/ (do not include the quotation marks). Copy the web address.
Paste the copied URL into the URL box in the iFrame Properties box. That should embed your video.
Continue to "Reset Video After Playing" and "Make Videos Responsive."
Vimeo Videos
The process is essentially the same for embedding a video from Vimeo.
To add a Vimeo video, go to the Vimeo page of the video. Click on the "Share" button below the title or on the video.
That will give you a menu for Share this video with Link, Email, and Embed.
Click on Embed. A line of HTML code that begins with <iframe will appear. In the line of code, highlight the web address for the Vimeo site that is located there. Start with https://player.vimeo.com/video/ (do not include the quotation marks). Copy the web address.
Paste the copied URL into the URL box in the iFrame Properties box. That should embed your video. Continue to "Make Videos Responsive."
Reset YouTube Videos After Playing
If you want to have the video return to the start of that particular video when it concludes, rather than going to a new video or showing related videos, just add ?rel=0 after the URL when you paste it in the iFrame Properties box. Example: For the video above, you would put https://www.youtube.com/embed/E_qE0aIpzGg?rel=0 in the URL box.
Make Videos Responsive
Once you have the URL entered, enter in a title for the video.
Once you have entered the code, click on “OK.” That will return you to the page. NOTE: You will not be able to see the video on the edit screen. It will show up on the edit screen as a white box outlined in black with iFrame written in red in the middle.
Now that you have added the iFrame video to the page, click on the “Source" button in the editor menu.
This will show a view of the page in HTML code.
Find the start of the code for your video, which begins with <iframe, and place the cursor just before the <iframe
Make sure the iFrame has the style="position:absolute; width:100%; height:100%" in the video code. If it does not have all of that code, add anything missing, then paste in the following HTML code just before the <iframe at the beginning: <div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
Then paste in the following HTML code just after the </iframe> at the end: </div>
The final code all together should look something like this:
<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;"><iframe frameborder="0" scrolling="no" src="https://www.youtube.com/embed/UZEy9FVn7s4?rel=0" style="position:absolute; width:100%; height:100%" title="video"></iframe></div>
Notes about padding:
In general, most videos in a standard aspect ratio will use the 56.25% number. However, you may need to adjust your padding % depending on the specific aspect ratio of your videos and the location of the embedded video. As an example, some of the common header video ratios are 34.7%, 36.55%, 37.48%, and 40.7%. Header videos should have an aspect ratio of 8:3 or which will use the 37.48% number.
Fix for when your video changes sizes if a page is edited
Currently there is a bug within the editor between the iFrame and our CKEditor where any of the styles on the iFrame are getting removed. This means that the video will lose the responsive styles on the video and it will not appear at the correct size.
We are working on a fix for this issue, but currently, in order to fix this, in the source code view you will need to manually apply a class to the outer DIV container that is either "video-container-4-3", "video-container-16-9", or "video-container-feature" (whichever one matches the closest to your video's aspect ratio) to make your video go back to being responsive and fill your iFrame. That updated code will look something like this:
<div class="video-container-4-3" style="position:relative; width:100%; height:0px; padding-bottom:56.25%;"><iframe frameborder="0" scrolling="no" src="https://www.youtube.com/embed/UZEy9FVn7s4?rel=0" style="position:absolute; width:100%; height:100%" title="video"></iframe></div>
See February's 2024 platform release notes for additional details.
After you have added all of the HTML code, you can click the source button to return to the normal editing screen.
Be careful while working around the video in your page as while the iFrame box might not appear as a video, but as an empty box and it is easy to accidentally click inside the video <div> code instead of your page's text area.
Example Featured or Looping Video
When used as a Featured Hero video your code may look something like this:
<div class="envelope-hero envelope-hero--text-bottom">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<div class="video-container-feature" style="position:relative; width:100%; height:0px; padding-bottom:40.28%; background-size: cover;"><iframe allowfullscreen="" frameborder="0" scrolling="no" src=https://player.vimeo.com/video/786031724?h=3dec58a0f7&background=1 style="position:absolute; width:100%; height:100%" title="University Communications examples of past video projects loop"></iframe></div></div>
For Vimeo videos to play on a loop, always add "&background=1" at the end of the video URL directly after the "h=number and letter combination" (in the example above this would be directly at the end of "https://player.vimeo.com/video/786031724?h=3dec58a0f7"). So your video source URL would look like this: "https://player.vimeo.com/video/786031724?h=3dec58a0f7&background=1" (as displayed in the example code above).
Accessibility in Practice
Caption all videos. YouTube has very useful built in captioning tools, although you should always have someone review any generated captions. For videos not hosted on YouTube you can caption your videos using web applications like Universal Subtitles.
All audio files must contain links to text transcripts.
Your videos need to have title="video"in the embed code, which is generally only added in Drupal 8+ versions in the source code.
Inserting Videos from Other Sources
Very rarely you may run across a video from somewhere other than YouTube, Vimeo, or media.uoregon.edu that you need to embed. Should you find yourself in this situation, you will need to insert the video using an iFrame.
Place your cursor where you want the video to be inserted.
Click on the iFrame (globe) icon on the right-hand side of the formatting bar.
That will bring up the IFrame Properties pop-up box.
Paste the URL from the video into the URL box of the iFrame pop-up.
Adjust the Width and Height relative to your video requirements.
Click the OK button and your video will be inserted. Note that you will not see your video until you publish your page, when the iFrame content is updated.