Videos

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

If you would like to set up a training for someone in your department who needs to learn our Drupal system or needs help beyond the basic instructions, please complete the request form and select training.

Ask for Assistance   Request Drupal Training


Add Videos

Place your cursor where you want the YouTube or Vimeo video to be inserted.

Click on the iFrame (globe) icon on the right hand side of the formatting bar.

Screenshot of WYSIWYG of button to add a video

That will bring up the IFrame Properties pop-up box. 

Drupal iFrame editor with "video" in the advisory title 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.

Screenshot of YouTube screen

That will give you a menu for Share, Embed, and Email. Click on Embed.

Screenshot of YouTube screen highlight the embed button

 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.

Screenshot of YouTube screen highlight the source code

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."

Drupal iFrame editor with "video" in the advisory title box

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.

Screenshot of the share button on Vimeo

 

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.

Screenshot of the embed code on Vimeo

Paste the copied URL into the URL box in the iFrame Properties box. That should embed your video. Continue to "Make Videos Responsive."

Drupal iFrame editor with "video" in the advisory title box


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, click on “Advanced” 

Screenshot of the iFrame Properties with Advanced circled

In the box marked “Style,” paste the following code: position:absolute; width:100%; height:100%

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.

Once you added the iFrame video to the page, click on the “Source" button in the editor menu or "Disable rich-text” link just below the copy

Body copy with the link for Disable rich-text circled

This will convert the body copy into HTML code.

HTML code for a basic page

Find the start of the code for your video, which begins with <iframe, and place the curser just before the <iframe

HTML code for a basic page with iframe code highlighted

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>

HTML code for a basic page with iframe code and div code highlighted

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>

After you have added the HTML code, you can click to “Enable rich-text” to return the normal editing screen. The iFrame box will not appear differently, but will be responsive on the live page.

Accessibility in Practice

Caption all video. YouTube has very useful built in captioning tools. 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.


Embedding videos from the media.uoregon.edu channel

Step 1

Currently the only way to embed a video from the media.uoregon.edu channel is in the source code view which is accessed by clicking the "Disable rich-text" link.

Body copy with the link for Disable rich-text circled

While in the source code view, find the location where you want to insert the video.


HELPFUL HINTS FOR WORKING IN THE SOURCE CODE VIEW

One way to find your place when you switch to the source code is to type into the regular, non-code view a series of letters like "vvvvv."

 

Screenshot of vvvv highlighted in a story

 

Then click on "Disable rich-text" link just below the editor and use the find function (CTRL+F or CMD+F) in your browser and search for vvvv to find where to insert the code in the source code view.

 

Screenshot of vvvv highlighted in the code

 


Once you have found the location where you want to have the video, you will need to copy and paste one of the below text options:

Video only code.
Video will be full width of the page.

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<p>
<video controls height="100%" type="video/mp4" width="100%">
<source autostart="false" src="https://VideoUrl.mp4">
<a href="URL">Your browser does not support the video tag, please click this link to view the video</a>.</video>
</p>
</div>

2 Column Grid Video.
Video will be full width of the grid item.

<div class="grid grid--2col">
<div class="grid__item">
<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<p>
<video controls height="100%" type="video/mp4" width="100%">
<source autostart="false" src="https://VideoUrl.mp4">
<a href="URL">Your browser does not support the video tag, please click this link to view the video</a>.</video>
</p>
</div>
</div>
<div class="grid__item">
<p>Grid item 2</p>
</div>
</div>
</div>

Step 2

To embed a media.uoregon.edu video you need to get the embed MP4 link. To get the link, browse to the video page you want to embed and click on the "embed" button/link in the upper left of the video and copy out the full .mp4 video URL:

Embedded video url for media.uoregon.edu

NOTE: Make sure you grab the entire URL from the https:// through the .mp4 and not one of the other URLs that are in the same code. A full URL should look something like this: 
https://is-cc-media.uoregon.edu/media//OHC/2017/UOToday2017/UOT_688_lo…

Step 3

Go back your video page and update the items that were in bold from Step 1 with the relevant URL links to the media.uoregon.edu video:

Save your page and you will see the video on the page, full width or, if you placed the video in grid, it will be only as wide as the grid item.

If you want to modify the grid order, please see the section on Grids for more information.

NOTE: You must use the above method to insert media.uoregon.edu videos, otherwise the video will autoplay when the page loads and will not be responsive on mobile or tablet devices.


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.

Screenshot of WYSIWYG of button to add a videoX

That will bring up the IFrame Properties pop-up box. 

Drupal iFrame editor with "video" in the advisory title 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.