Embed Videos on a Page

This article will tell you how to properly embed a video from YouTube or CivicMedia into one of your web pages, using the Custom HTML widget.

Important Notes

• Code:

  • Open iframe: <iframe>

  • Close iframe: </iframe>

• Height and Width:

  • Your iframe Embed Code requires a width and height to display correctly. Width measurements must be set as a percentage to be mobile-responsive. Height may be left as a number (which will indicate how many pixels (px) of height will be used).

  • Example: width=100% height=”500”

• Troubleshooting:

  • Embedded videos may not appear if the source code is not a secure site (for example, http://). All embed codes require https://

• Example of a Robust Embed Code:

  • This code opens and has a percentage width, a display height, a secure source, and a closing code

• Embedded video autoplay: Videos embedded using an iframe (specifically YouTube and CivicMedia) can be set up to autoplay using query strings after the video URL. However, you must include the mute option. Otherwise, Chromium browsers (and Firefox) will block the action.

Who can use this feature?

System Administrators | Owners | Publishers | Authors

Instructions

1. Sign in to your site

2. Copy the embed code from YouTube or CivicMedia

3. Navigate to your desired page

4. Ensure that the Live Edit state is toggled to ON:

5. Click on the Widgets tab in the Live Edit pane:

6. Drag and drop a Custom HTML Widget onto your page:

7. Paste your Embed Code into the widget:

8. Click the Done button to stop editing:

9. Click the Save button to update your page: