YouTube Video Embed Instructions

Embed the iframe on Your Webpage

The embed code will be provided and begins with <iframe.

Copy the URL for the video from inside the embed code, starting with https://.
- If YouTube won't allow you to select only the URL, go ahead and copy the entire embed code. You can 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.
Go back to your webpage and click on the iframe Embed icon the right-hand side of the editing bar to bring up the Iframe Embed pop-up box.

Paste the copied URL into the URL field in the Iframe Embed box.
In the Advisory Title field, enter a description of the video. This will show up as title="your description here" in the iframe.
- 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 showing fractal patterns in nature with audio of Physicist Richard Taylor and UO environmental sociologist Richard York discussing the beauty and benefits of nature's fractal patterns."
- Read the UO Digital Content Accessibility documentation to learn more about making videos accessible, including adding captions and transcripts.
When the video ends, YouTube will automatically suggest more videos. To limit the suggested videos to the source channel of the video you are embedding, add ?rel=0 to the end of the URL in the Iframe Embed box.
Click the green checkmark to embed your video.

After adding a YouTube video to your page, click on the “Source" button in the editor menu. This will show a view of the page in HTML code.
Add style="position:absolute; width:100%; height:100%" to the iframe code, which begins with <iframe. See the example below:

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 video padding settings are 34.7%, 36.55%, 37.4%, 40.7%, and 42.5%.
If you find that a border is showing on one or more edges of the video, adding frameborder="0" inside the iframe will likely resolve the issue.
Close the div you just added by adding </div> just after </iframe>.
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.

The final code should look something like this:

Note: The iframe may not be visible in the editor unless you are working in the Source view.