Embed the iframe on Your Webpage
- Place your cursor where you want to insert the YouTube video on your webpage.
- Go to the video on YouTube and click on Share below the title of the video.
![screenshot of The Essential Beauty of Fractal Patterns video title frame with the Share button circled in red](/sites/default/files/styles/custom_xl/public/2024-07/fractals-youtube-share-screenshot.jpg?itok=JX-gBg_f)
- Choose Embed from the options provided in the pop-up window.
![screenshot of the YouTube sharing options with the Embed option circled in red](/sites/default/files/styles/custom_xl/public/2024-07/you-tube-embed-option-screenshot.jpg?itok=HDFuPq-6)
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.
![the iframe embed icon highlighted in the Drupal editor toolbar](/sites/default/files/styles/custom_xl/public/2024-01/drupal-editor-toolbar-iframe_1800x69.jpg?itok=XPOAMXW3)
![screenshot of the iframe embed pop-up box with the fields URL, Name, Width, Height, and Advisory Title](/sites/default/files/styles/custom_xl/public/2024-07/iframe-embed-screenshot.jpg?itok=TrCWWcMN)
- 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 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.
Make the Video Responsive
![source icon in the Drupal content editor](/sites/default/files/styles/custom_xl/public/2023-10/source-icon_85x50.jpg?itok=mlMjcaVU)
- 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:
<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 video padding settings are 34.7%, 36.55%, 37.4%, and 40.7%. - 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.
Final Code Example
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>
Note: The iframe may not be visible in the editor unless you are working in the Source view.