Make Videos Responsive
After adding a YouTube video or adding a Vimeo video to your 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.
Add style="position:absolute; width:100%; height:100%" to the iframe code.
For example, the iframe code should look like this:
<iframe src="https://www.youtube.com/embed/u0hp-alaSAU?si=8nkn_YZsNRIZMWvN?rel=0" style="position:absolute; width:100%; height:100%"> </iframe>
Next, add the following HTML code just before the <iframe: <div class="video-container-16-9" style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
Note: Many videos will work well with 56.25% for padding-bottom in the div surrounding the iframe. However, you may need to adjust your padding % depending on the specific aspect ratio of your videos and the location of the embedded video. Some example header video ratios are 34.7%, 36.55%, 37.4%, and 40.7%.
To complete the code, add </div> just after </iframe>.
The final code should look something like this:
<div class="video-container-16-9" style="height:0px;padding-bottom:56.25%;position:relative;width:100%;">
<iframe src="https://www.youtube.com/embed/u0hp-alaSAU?si=8nkn_YZsNRIZMWvN?rel=0" style="position:absolute; width:100%; height:100%"> </iframe>
</div>
After you have added all of the HTML code, click the source button to return to the normal editing screen and be sure to save your work.
Note: Be careful while working around the video when editing your page as the iframe may not be visible in the editor unless you are working in the Source view.
Fix for previously embedded videos that shrink after a page is edited:
There is currently a bug within the CKEditor where styles on the <iframe> element are ignored. This causes previously added videos to appear smaller after an edit is made on the page.
You can fix this by applying one of three classes to the outer DIV container: "video-container-4-3", "video-container-16-9", or "video-container-feature" (whichever one matches the closest to your video's aspect ratio). See the section above for example embed code.
Videos in a hero envelope using the hero envelope code below are not affected by this bug and do not need to have one of these three classes added.
Example Featured or Looping Video
When used as a featured hero envelope video your code may look something like this:
<div class="envelope-hero envelope-hero--no-text envelope-hero--video">
<div class="envelope-hero__container">
<div class="envelope-hero__photo">
<div style="background-image:url(https://i.vimeocdn.com/video/1580043490-d9aa49772e5e4e9df89c753778f216647502f81f079df206c64411401bfb2ea7-d?mw=2700&mh=1087&q=70);background-size:cover;height:0px;padding-bottom:37.5%;position:relative;width:100%;">
<iframe frameborder="0" scrolling="no" src="https://player.vimeo.com/video/786031724?h=3dec58a0f7&background=1" title="looping video without audio showing the UO Eugene campus and students in action in various settings"> </iframe>
</div>
</div>
</div>
</div>
For Vimeo videos to play on a loop, always add "&background=1" at the end of the video URL, as shown in the example above.
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 Embed icon the right-hand side of the editing bar.
That will bring up the Iframe Embed 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.