Custom Embed | Cells Plugin Documentation

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 do not see this option, then the UNCSOM Cells plugin needs to be activated.
Select the Add New button.
Cell Name: 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.
Layout: Single Blocks
Block Category: Text Blocks
Block Style: Custom Embed
Embed Type: Custom Embed
- X (Twitter): Use for any type of embed code from X (Twitter)
- Vimeo: Use for embedding videos or playlists from Vimeo
- Instagram: Use for any type of embed code from Instagram
- Other: use for any other type of HTML Embed code including those from YouTube, Facebook, Panopto, etc.
For each block:
1. Embed Text: copy and directly paste the embed code into this field. There is no need to change the code like you may be familiar with when embedding iFrames directly into a WordPress news post, page, etc.
2. Ensure all iframe embed code contains a title attribute to meet accessibility guidelines. See below for further explanation.
Click the Create Cell button.
If you’re ready, you can display the Cell on your website.

Accessibility

The title attribute on an <iframe> 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.

Each iframe on a page should have a unique title to avoid confusion for users.
The title attribute should be descriptive and accurate, clearly indicating the content of the iframe.

Facebook Example

The default Facebook embed code does not include a title attribute, so site editors will need to manually add one.

Default Embed Code

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUNCSOM%2Fposts%2Fpfbid02Xm8JPrSYm2mQxZf4FLFaKEwnVN72yQnvm82EP6E9SyNZcGwYF4Y9fiXgMbunfVVQl&show_text=true&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"></iframe>

Embed Code With Title Attribute

YouTube Example

The default YouTube embed code includes a generic title like “YouTube video player”, 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.

Default Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/14KIx36nfVc?si=Mrp7kvy4lTMbAV1v" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Improved Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/14KIx36nfVc?si=Mrp7kvy4lTMbAV1v" title="YouTube video where UNC Health and Duke Health announced plans to create NC Children's, the Carolina's first freestanding children's hospital." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>