{"id":10064,"date":"2021-01-04T14:13:46","date_gmt":"2021-01-04T19:13:46","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=10064"},"modified":"2025-02-04T14:27:24","modified_gmt":"2025-02-04T19:27:24","slug":"youtube","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/video\/youtube\/","title":{"rendered":"YouTube"},"content":{"rendered":"<p>In the School of Medicine web system, you can display a YouTube video on a web page through the use of an iframe.<\/p>\n<p>&nbsp;<\/p>\n<p>1. On the page of the YouTube video, select the <strong>share<\/strong> button below the video.<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/youtube-share.png\" alt=\"Screenshot showing where the share button is for a YouTube video.\" width=\"365\" height=\"144\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>2. You will see a popup with several share options. Select the <strong>Embed<\/strong> button.<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/youtube-embed.png\" alt=\"Screenshot showing where the Embed option is for a YouTube video.\" width=\"371\" height=\"222\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>3. Copy the embed code.<\/p>\n<p><span class=\"imgBorderMed\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/youtube-iframe.png\" alt=\"Sample embed code from YouTube.\" width=\"352\" height=\"296\" \/><\/span><\/p>\n<p>4. Paste the embed code into your web page.<\/p>\n<p>5. In the code you just pasted, you have to change the alligator brackets (<span style=\"color: #c00;\"><strong>&lt;<\/strong><\/span> and <span style=\"color: #c00;\"><strong>&gt;<\/strong><\/span>) to the squared off brackets ( <span style=\"color: #c00;\"><strong>[<\/strong><\/span> and <span style=\"color: #c00;\"><strong>]<\/strong><\/span> ).<\/p>\n<p>6. Your code should look something like this:<\/p>\n<p><code>[iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RD8p9wvr4yw\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen][\/iframe]<\/code><\/p>\n<h3>Example<\/h3>\n<p>The code above will embed the following video on the page.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RD8p9wvr4yw\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" 0=\"allowfullscreen\" title=\"A sample YouTube video from ºÚÁÏÍø Health about Covid\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3>Always Provide a Title for an Iframe<\/h3>\n<p>For accessibility reasons, you should always include a <strong>title<\/strong> attribute for the &lt;iframe&gt;. This is used by screen readers to read what the content of the &lt;iframe&gt; is. If the iframe code does not have it, you will need to add the attribute (<code class=\"inline\">title=\"Add your descriptive title here\"<\/code>). Be sure you provide a title that properly describes the contents of the iframe.<\/p>\n<p><code>[iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/RD8p9wvr4yw\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen <span class=\"code-highlight\">title=\"ºÚÁÏÍø Covid Update\"<\/span>][\/iframe]<\/code><\/p>\n<h3>Modifying the iFrame Size<\/h3>\n<p>You can optionally change the width and height of the video in the iframe code if you need to change the size of the video. Simply look for the width and height attributes in the code. You can insert a fixed size in pixels such as <code class=\"inline\">height=\"640\" width=\"480\"<\/code>. Or, you can use a percentage based method to adjust the iFrame automatically such as <code class=\"inline\">width=\"100%\"<\/code>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the School of Medicine web system, you can display a YouTube video on a web page through the use of an iframe. &nbsp; 1. On the page of the YouTube video, select the share button below the video. &nbsp; 2. You will see a popup with several share options. Select the Embed button. &nbsp; &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/media\/video\/youtube\/\" aria-label=\"Read more about YouTube\">Read more<\/a><\/p>\n","protected":false},"author":64010,"featured_media":0,"parent":12064,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-10064","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\/10064","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\/64010"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=10064"}],"version-history":[{"count":47,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10064\/revisions"}],"predecessor-version":[{"id":12991,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10064\/revisions\/12991"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12064"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=10064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}