{"id":1653,"date":"2025-02-07T16:49:58","date_gmt":"2025-02-07T16:49:58","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=1653"},"modified":"2025-06-08T20:12:13","modified_gmt":"2025-06-08T20:12:13","slug":"custom-embed","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/","title":{"rendered":"Custom Embed"},"content":{"rendered":"<h2>Creating A Custom Embed<\/h2>\n<p>Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/pre-asses\/\">Determine where the Cell will be used<\/a>.<\/li>\n<li>In the Dashboard, select <strong>Cells<\/strong> in either the top or left-hand navigation.\n<ul>\n<li>If you do not see this option, then the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage#activate\"><strong>UNCSOM Cells<\/strong> plugin needs to be activated<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Select the <strong>Add New<\/strong> button.<\/li>\n<li><strong>Cell Name:<\/strong> provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.<\/li>\n<li><strong>Layout:<\/strong> Single Blocks<\/li>\n<li><strong>Block Category:<\/strong> Text Blocks<\/li>\n<li><strong>Block Style:<\/strong> Custom Embed<\/li>\n<li><strong>Embed Type:<\/strong> Custom Embed\n<ul>\n<li><strong>X (Twitter):<\/strong> Use for any type of embed code from X (Twitter)<\/li>\n<li><strong>Vimeo:<\/strong> Use for embedding videos or playlists from Vimeo<\/li>\n<li><strong>Instagram:<\/strong> Use for any type of embed code from Instagram<\/li>\n<li><strong>Other:<\/strong> use for any other type of HTML Embed code including those from YouTube, Facebook, Panopto, etc.<\/li>\n<\/ul>\n<\/li>\n<li>For each block:\n<ol>\n<li><strong>Embed Text:<\/strong> copy and directly paste the embed code into this field. There is <strong>no need<\/strong> to change the code like you may be familiar with when <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/iframes\/\">embedding iFrames directly into a WordPress news post, page, etc.<\/a><\/li>\n<li>Ensure all iframe embed code contains a <strong>title<\/strong> attribute to meet accessibility guidelines. See below for further explanation.<\/li>\n<\/ol>\n<\/li>\n<li>Click the <strong>Create Cell<\/strong> button.<\/li>\n<li>If you&#8217;re ready, you can <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/using-a-cell\/\">display the Cell<\/a> on your website.<\/li>\n<\/ol>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Accessibility<\/h2>\n<p>The <strong>title<\/strong> attribute on an <strong>&lt;iframe&gt;<\/strong> is crucial for web accessibility. It helps screen reader users understand the purpose and context of embedded content by providing a description for the frame.<\/p>\n<ul>\n<li>Each iframe on a page should have a <strong>unique title<\/strong> to avoid confusion for users.<\/li>\n<li>The title attribute should be <strong>descriptive and accurate<\/strong>, clearly indicating the content of the iframe.<\/li>\n<\/ul>\n<h3>Facebook Example<\/h3>\n<p>The default Facebook embed code does not include a title attribute, so site editors will need to manually add one.<\/p>\n<h4>Default Embed Code<\/h4>\n<p><code>&lt;iframe src=\"https:\/\/www.facebook.com\/plugins\/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUNCSOM%2Fposts%2Fpfbid02Xm8JPrSYm2mQxZf4FLFaKEwnVN72yQnvm82EP6E9SyNZcGwYF4Y9fiXgMbunfVVQl&amp;show_text=true&amp;width=500\" width=\"500\" height=\"508\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<h4>Embed Code With Title Attribute<\/h4>\n<p><code>&lt;iframe src=\"https:\/\/www.facebook.com\/plugins\/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUNCSOM%2Fposts%2Fpfbid02Xm8JPrSYm2mQxZf4FLFaKEwnVN72yQnvm82EP6E9SyNZcGwYF4Y9fiXgMbunfVVQl&amp;show_text=true&amp;width=500\" width=\"500\" height=\"508\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\" <strong>title=\"Embedded Facebook posts from UNC School of Medicine\"<\/strong>&gt;&lt;\/iframe&gt;<\/code><\/p>\n<h3>YouTube Example<\/h3>\n<p>The default YouTube embed code includes a generic title like &#8220;YouTube video player&#8221;, which is not descriptive and does not meet accessibility best practices. It should be replaced with a meaningful, unique title that reflects the content of the video.<\/p>\n<h4>Default Embed Code<\/h4>\n<p><code>&lt;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/14KIx36nfVc?si=Mrp7kvy4lTMbAV1v\" <strong>title=\"YouTube video player\"<\/strong> frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/p>\n<h4>Improved Embed Code<\/h4>\n<p><code>&lt;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/14KIx36nfVc?si=Mrp7kvy4lTMbAV1v\" <strong>title=\"YouTube video where UNC Health and Duke Health announced plans to create NC Children's, the Carolina's first freestanding children's hospital.\"<\/strong> frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating A Custom Embed Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/\" aria-label=\"Read more about Custom Embed\">Read more<\/a><\/p>\n","protected":false},"author":79967,"featured_media":0,"parent":28,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1653","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom Embed - Cells Plugin Documentation<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Embed - Cells Plugin Documentation\" \/>\n<meta property=\"og:description\" content=\"Creating A Custom Embed Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/\" \/>\n<meta property=\"og:site_name\" content=\"Cells Plugin Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-08T20:12:13+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/\",\"name\":\"Custom Embed - Cells Plugin Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\"},\"datePublished\":\"2025-02-07T16:49:58+00:00\",\"dateModified\":\"2025-06-08T20:12:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Single Cell Blocks\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Text Blocks\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Custom Embed\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\",\"name\":\"Cells Plugin Documentation\",\"description\":\"School of Medicine IT Web Guide\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Embed - Cells Plugin Documentation","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Custom Embed - Cells Plugin Documentation","og_description":"Creating A Custom Embed Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/","og_site_name":"Cells Plugin Documentation","article_modified_time":"2025-06-08T20:12:13+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/","name":"Custom Embed - Cells Plugin Documentation","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website"},"datePublished":"2025-02-07T16:49:58+00:00","dateModified":"2025-06-08T20:12:13+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/custom-embed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/"},{"@type":"ListItem","position":2,"name":"Single Cell Blocks","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/"},{"@type":"ListItem","position":3,"name":"Text Blocks","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/text-blocks\/"},{"@type":"ListItem","position":4,"name":"Custom Embed"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/","name":"Cells Plugin Documentation","description":"School of Medicine IT Web Guide","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/1653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/users\/79967"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=1653"}],"version-history":[{"count":5,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/1653\/revisions"}],"predecessor-version":[{"id":1726,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/1653\/revisions\/1726"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/28"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=1653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}