Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Embed Videos on a Page

  • Updated:

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

 

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
    • <iframe Width=”100%” height=”500” src=” https://www.civicengage.civicplus.help” </iframe>:
      Sample of Correctly Constructed iframe code for a video embed.

 

 

Instructions

  1. Copy the embed code from the video source
  2. Sign in to your site
  3. Navigate to your desired page and if needed, click Try New UI
    Try New UI.
  4. Click Widgets
    Widgets menu.
  5. Drag and drop the Custom HTML widget onto your page
    Custom HTML widget.
  6. Paste your Embed Code into the widget
    Embed code.
  7. Click the Done button
    Done button.
  8. Click Save at the top of the page
    Save Changes.

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.