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
  • <iframe Width=”100%” height=”500” src=” https://www.civicengage.civicplus.help” </iframe>:
    

Instructions

1. Copy the embed code from YouTube or CivicMedia
2. Navigate to your desired page
3. Ensure that the Live Edit state is toggled to ON:
   
4. Click on the Widgets tab in the Live Edit pane:
   
5. Drag and drop a Custom HTML Widget onto your page:
   
6. Paste your Embed Code into the widget:
   
7. Click the Done button to stop editing:
   
8. Click the Save button to update your page: