Skip to main content
School of Medicine IT

iFrames

An iFrame (Inline Frame) is an HTML element that is used to insert, or “embed,” content from one website into another. it provides an easy way to embed video or other content on your site without having to host the file in your site’s Media Library.

Some of the common sites that our users pull, or embed, content from is Panopto, YouTube, Google Maps, Facebook, Twitter, and UNC Campus Maps.

Most of these third-party sites give you the iFrame code that you need to add to your site. That code can often be found under a Share option. When you click the Share button you will likely be presented with several options. Select the Embed option to see the iFrame code.

Ways to share videos hosted in Panopto.

Simply copy the <iframe>…</iframe> code and paste it into your web page/post.

Here’s the trick: In the code you just pasted, you have to change the alligator brackets (< and >) to the squared off brackets ( [ and ] ).

Example

Below is an example of how to modify the iframe code from Panopto. This code embeds a video about Accessible Web Colors on the page.

Below is what the embed code looks like straight out of Panopto:

<iframe src="https://uncch.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=57624079-8af2-481d-be42-ace100e9b5ef&autoplay=false&offerviewer=true&showtitle=true&showbrand=false&captions=true&interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay"></iframe>

 

Below is what the code will look like after the brackets have been changed:

[iframe src="https://uncch.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=57624079-8af2-481d-be42-ace100e9b5ef&autoplay=false&offerviewer=true&showtitle=true&showbrand=false&captions=true&interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay"][/iframe]

A Title Is Required For Accessibility

Inline frames can introduce accessibility barriers, so use them sparingly.

If you add an <iframe>, you must include a title attribute. This rule comes from the Web Content Accessibility Guidelines (WCAG) success criterion 4.1.2 Name, Role, Value.

The title must summarize the visual content of the frame to help users of screen readers understand its purpose. Think of the title as the alternative text for the <iframe>.

Here’s an example of what the HTML can look like:

<iframe src="https://uncch.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=57624079-8af2-481d-be42-ace100e9b5ef&autoplay=false&offerviewer=true&showtitle=true&showbrand=false&captions=true&interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay" title="Accessible Web Colors, an accessibility training video for UNC School of Medicine website authors." ></iframe>

In this example, the title includes the original name and extra context that describes its content.

Modifying the iFrame Size

Before copying the embed code from third-party sites, you are often given the option to define the width and height of your iframe. If not, you can usually change the dimensions of the video in the iframe code. Simply look for the width and height attributes. You can insert a fixed sizes in pixels such as height="640" width="480". Or, you can use a percentage based method to adjust the iFrame automatically such as width="100%".

Alternatives to iFrames

In some cases the School of Medicine has shortcode or plugins that can be used as alternative ways to embed content.

Related Resources