Adding iFrames / YouTube Videos

An iFrame, or inline frame, is an HTML element that loads external web content into your site. You may also hear iFrame content referred to as embedded content.  Some examples of common iFrame content include interactive content from third party websites, Google calendars, and YouTube videos.

Regardless of the type of embedded content you use, iFrame content is added the same, so this tutorial will use a YouTube video iframe code.

Adding Embedded iFrame Content Using Page Properties

Adding content using the page properties is the recommended method. This protects your iFrame/embedded content from accidentally being deleted or altered in edit mode.  Any content added in the page properties will go under any content you added to that section.

Begin by making sure your page is checked out and then click the Properties tab at the top.

See page properties documentation for more help if needed.

1. Scroll down to the Content Setup Options section and then find the section number for where you want to add your content.
2. Use the Data Object dropwdown and select YouTube / Embedded Content.

3. Paste your iFrame code into the Data Source box and save to see your embedded content.

 

Accessibility Requirement

Your embed code requires two things to be ATI compliant.

• Inside the iframe code add: title="A good title for your content"
• Between the <iframe> and </iframe> tags add: <p>Your browser does not support frames</p>. 

Sample Embed Code

This is how your embed code should look using our video example here:

<iframe width="560" height="315" src="https://www.youtube.com/embed/20SHvU2PKsM" title="Introduction to Web Accessibility and W3C Standards" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen><p>Your browser does not support frames</p></iframe>

By default, iFrame content will size based on the native width and height as set in the embed code you copied, if available. Otherwise, the final output for your embedded content will display based on several factors:

• The originating content location.  Third party content may have preset sizes that may cause scroll bars within a section.
• The size of the section where you add your content.
• Adding an iFrame CSS style into the CSS box for the section where you have added your iFrame content.

DO NOT include video content that does not have closed captions available. Closed captions are required.

Your embedded content will go below any other text or images you have in a section.

Begin by selecting the edit button for the section you want your iframe content to be added to, then click the Source Code button in the toolbar.

Put your cursor where you want your video to show up.  You don't need to be able to understand HTML to do this, but you do need to be careful.  

Once you have pasted the iFrame code, simply click Save on the bottom right of the Source Code dialogue box.

Do not worry! If you did it incorrectly, or it isn't where you wanted it to go, you can click the undo button in the toolbar (or CTRL/Z on a PC or CMD/Z on a Mac) while still in edit mode.