Inserting Embed Codes (iFrame)

What is an embed code? 

An embed code is a block of HTML code that is placed in another page and renders a visual element — a video, social media post, form, or page — from another website or source. You can embed YouTube videos, Twitter posts, forms, and other multimedia objects on another website.

Here’s an example of an embed code for a YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/4zXdHSx7LBM?si=mELQb-MbPGs-rKA5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

❗IMPORTANT -- ADA COMPLIANCE:
When placing an embed code, you MUST include a title tag -- this describes what the embed code is. You can place the title="" in between the "iframe" and "width" text within the code. In between the quotations, you should insert your descriptive text there.  For example:

<iframe title="Choir Christmas Concert" width="560"...

Placing an embed code can be done within the Tray-Text component.

How to Add HTML Embed Code to Your Site

1. Go to the webpage, form builder, or social post you’d like to embed.

2. Generate the embed code using the website's options/instructions.

3. If applicable/necessary, customize the embed code. This may include customizations to the height and width of the element.

4. Highlight the embed code, then copy it to your clipboard. 

    keyboard shortcuts: Ctrl + C for Windows / Command + C for MacOS

5. In the CMS, go to your Tray-Text component and open it.  

6. In the menu of your Copy editor, click on Tools -- Source Code.

7. Paste your embed code in the Source Code window that pops up:

8. Click 'Submit'.

9. After all edits are done on your page, advance the page in workflow in order to publish your addition(s)/change(s).

Enjoy the concert!  :)