Embed Videos on a Page

Prev Next

This article will tell you how to properly embed a video onto one of your web pages using the Custom HTML widget.

Who can use this feature?

System Administrators | Owners | Publishers | Authors

Helpful Codes

  • Iframe 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 of height will be used).

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

  • Troubleshooting:

    • Embedded videos may not appear if the source code is not from a secure site, such as a site that uses 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:

      • <iframe width="100%" height="500" src="https://www.civicplus.com"> </iframe>

Instructions

  1. Copy the embed code from the video source

  2. Sign in to your site

  3. Navigate to the page you want to embed the video on

  4. Click the Widgets tab:
    The Widgets button.

  5. Drag and drop the Custom HTML widget onto your page:
    The Custom Html button dragged and dropped onto the page.

  6. Paste your copied embed code into the widget:
    An HTML iframe code snippet for embedding a video from.

  7. Click the Done button:
    The Done button.

  8. Click the page’s Save Changes button:
    The Save Changes button.