Embedding Videos

As important as written content is for your site, video is still a great way for your community to absorb information and a common way for people to consume content. Videos are an interactive method of keeping your community engaged and visually show off new services or information in your city or council. They can also be a good method of fitting complicated instructions or facts into a smaller space on your site.

You can show videos by embedding them into a webpage's HTML, allowing you to play videos on your site without hosting the file. To do this, you need a code snippet to pull the video from your video hosting service. A code snippet for a particular video can typically be found in the share menu of a video's play page on the hosting service. Look for options such as "Embed" or "Copy embed code" or this embed icon: "</>."

There are two ways to embed a video into your site:

• Insert the code snippet into the HTML of a page
• Use the embed feature in the WYSIWYG toolbar

Inserting Code Snippets into HTML

For embedded content that won't be used often, you can paste it directly into the HTML of a page. You will likely use iFrames for this. There are two ways to do this, firstly:

1. First, find and copy the code snippet of the video you want to insert into your page. This can be found on the play page of the video on the service you use to host them.
2. Go to the page to which you want to add the code, select Update if it has been published, and open the WYSIWYG Editor.
3. Place your cursor in the body content where you want to place the video.
4. Select the Paste Html tool from the WYSIWYG toolbar.
   
5. Paste the code snippet into the Paste HTML window, and the video will be automatically added to your body content.
   
6. Select Save Content and Close to save your WYSIWYG content and Publish your page.

The other way to do this is:

1. Find and copy the code snippet of the video you want to insert into your page. This can be found on the play page of the video on the service you use to host them.
2. Go to the page to which you want to add the code, Update it if it has been published, and open the WYSIWYG Editor.
3. Go to the HTML tab of your WYSIWYG Content, scroll down to where you want the video to be, and paste the code snippet directly into the HTML of your page.
4. Select Save Content and Close to save your WYSIWYG Content and Publish your page.

Using the Embed Feature in the Toolbar

Code snippets can be saved to the Embed codes area of your admin and accessed through the WYSIWYG toolbar to be used on multiple pages. It's more beneficial for third-party scripts, but you may have videos you want to display on multiple pages. To do this:

1. Go to More > Embed codes. You'll see a list of embed codes that have been added.
2. Select Add code. A new code menu will open.
3. Use the Name field to give your code a descriptive name and paste your code snippet into the Embed code field.
4. Save your changes.
5. Go to the page where you want to insert the code and select Update if it has been published.
6. Open the WYSIWYG Editor of the page, and select the Insert Plugins tools.
   
7. In the drop-down menu, select your code. It will named like this: Embed - [your site] - [Your embed code name].
8. Select Save Content and Close to close the WYSIWYG Editor and Publish your page.

Best-practice Tips

• While videos are a great tool, they should be used correctly to maximize their benefits. Each video should have a specific focus or message, and it is wise to create a brief script before recording to keep the video focused and engaging.
• You should also be wary of relying on videos too much. Having videos to explain everything on your site can be detrimental to those of your audience who prefer to read instructions or who find following videos difficult. 
• It's also important to consider accessibility. You should always add closed captions or transcripts for long videos so everyone can access the information within them, and turn off any auto-play settings as a courtesy to your site visitors.
• Your videos should always be responsive. Many platforms do this automatically, but there are online tools, such as Embed Responsively, to ensure this. They should not be put into interactive content such as tabs, accordions, or responsive tables, as nested content will not always resize properly. 
• Some videos you create will aim to get your community to complete a task. It's always best to end with a call-to-action for videos like this.