Skip to main content

An iFrame (Inline Frame) is an HTML element that is used to insert, or “embed,” content from one website into another. They provide 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, 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]


Always Provide a Title for an Iframe

For accessibility reasons, you should always include a title attribute for the <iframe>. This is used by screen readers to read what the content of the iframe is. If the iframe code does not have it, you will need to add the attribute (title="Add your descriptive title here"). Be sure you provide a title that properly describes the contents of the iframe.

<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" ></iframe>


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.


Resources