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<\/strong> option. When you click the Share button you will likely be presented with several options. Select the Embed<\/strong> option to see the iFrame code.<\/p>\n Simply copy the <iframe>\u2026<\/iframe> code and paste it into your web page\/post.<\/p>\n Here’s the trick<\/strong>: In the code you just pasted, you have to change the alligator brackets (<<\/strong><\/span> and ><\/strong><\/span>) to the squared off brackets ( [<\/strong><\/span> and ]<\/strong><\/span> ).<\/p>\n 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.<\/p>\n Below is what the embed code looks like straight out of Panopto:<\/p>\n <\/p>\n Below is what the code will look like after the brackets have been changed:<\/p>\n Inline frames can introduce accessibility barriers, so use them sparingly.<\/p>\n If you add an\u00a0<iframe>, you must include a\u00a0title attribute<\/strong>. This rule comes from the\u00a0Web Content Accessibility Guidelines (WCAG) success criterion 4.1.2 Name, Role, Value<\/a>.<\/p>\n 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\u00a0<iframe>.<\/p>\n Here’s an example of what the HTML can look like:<\/p>\n In this example, the title includes the original name and extra context that describes its content.<\/p>\n 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 In some cases the School of Medicine has shortcode or plugins that can be used as alternative ways to embed content.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" 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, … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2168,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-12139","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=12139"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12139\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2168"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=12139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Ways](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/share-options.png\")
<\/span><\/p>\n
\nExample<\/h2>\n
<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> <\/code><\/p>\n[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]<\/code><\/p>\n
\nA Title Is Required For Accessibility<\/h2>\n
<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.\"<\/span> ><\/iframe> <\/code><\/p>\n
\nModifying the iFrame Size<\/h2>\n
height=\"640\" width=\"480\"<\/code>. Or, you can use a percentage based method to adjust the iFrame automatically such as width=\"100%\"<\/code>.<\/p>\n
\nAlternatives to iFrames<\/h2>\n
\n
\nRelated Resources<\/h2>\n
\n