Vimeo Video Embed Instructions

Embed the iframe on Your Webpage

Go to the Vimeo video URL and click on the "Share" button. For example, the "We Just Say... It's Oregon" video shown below includes the video player at the top of the window with the Share button below the video.

In the "Share this video" box that opens after clicking the Share button, you will have Link, Email, and Embed options.

(Note: If your view of the video is different, you may need to click Settings or Manage instead.)

Screenshot of UO Vimeo video and share button

Click on Embed. A line of HTML code that begins with <iframe will be provided.
Copy the URL for the video starting with https:// up to the &. The end of the URL will include a string of numbers, or two strings of numbers separated by ?h=, like this: 356236997?h=1c4109c88d.
- For example: https://player.vimeo.com/video/356236997?h=1c4109c88d (the next character is &)
- If Vimeo won't allow you to select only this portion of the embed code, go ahead and copy the entire embed code. Temporarily paste it into the webpage where you are going to be embedding the video, copy the URL from there, and then delete the embed code from the page.
Place your cursor where you want to insert the Vimeo video on your web page.
Click on the Iframe Embed icon in the right-hand side of the editing bar.

That will bring up the Iframe Embed pop-up box.

screenshot of the iframe embed pop-up box with the fields URL, Name, Width, Height, and Advisory Title

Paste the copied URL into the URL field in the Iframe Embed box.
In the Advisory Title field, enter a description of the video.
- People using screen readers will likely be able to access this description to get an understanding of the information provided in the video.
- Include the word "video" in your description because screen readers will not be able to detect the type of content that is contained in the iframe.
- Example: "Video without audio showing UO students engaged in various activities such as hiking, kayaking, studying, singing, participating in sports, traveling, talking with other students, and celebrating commencement."
- Read the UO Digital Content Accessibility documentation to learn more about making videos accessible, including providing captions and transcripts.
Click the green checkmark to embed the iframe in the page.

Looping Banner Videos

For looping banner videos with autoplay and no audio, which is common at the top of our marketing pages:

After following the instructions above, add &background=1 to the end of the video URL to enable background playback mode.

For example: https://player.vimeo.com/video/786031724?h=3dec58a0f7&background=1
Add the background image URL by following the steps below. The background image serves as a visual placeholder while the video is loading. The image should be the same as the first frame of the video to create a smooth transition between the image and the video.
- You will need to be logged into Vimeo to perfom this step. If you are not able to log in, ask the producer of your video to share the background image URL with you.
- Once logged in, either click "Settings" or "Manage" to reach an admin view of the video that includes a "Thumbnail" section.
- There will most likely already be a background image in the "Thumbnail" section. If not, you can either upload a screenshot of the first frame of the video at the largest size possible, or you can ask your video producer for assistance.
- Right click/command click the thumbnail and open the image in a new tab.
- Go to that tab and copy the URL for the image from https through -d at the end.
- Click the Source icon in the Drupal editor toolbar to edit the source code on your page. Find the code for your iframe and add the URL to a div before the iframe in the following format to help make the video responsive:
  
  <div style="background-image:url(https://i.vimeocdn.com/video/1580043490-d9aa49772e5e4e9df89c753778f216647502f81f079df206c64411401bfb2ea7-d?mw=2700&mh=1087&);background-size:cover;height:0px;padding-bottom:37.5%;position:relative;width:100%;">
  
  Note: You may need to adjust your padding % depending on the specific aspect ratio of your videos and the location of the embedded video. For example, some videos may require 34.7%, 36.55%, 40.7%, 42.5%, or 56.25%.
- Close the div after the iframe by adding </div>.