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.
OpenCities hosts videos by embedding them into a page's HTML, allowing you to play videos on your site without hosting the file. To do this, you need a code snippet that will pull the video from the video hosting service you use. 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 it could be represented by this embed icon: '</>'.
There are two ways to embed a video into your site:
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:
- 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.
- Go to the page you want to add the code to, select Update if it has been published, and open the WYSIWYG Editor.
- Place your cursor in the body content where you want to place the video.
- Select the 'Paste Html' tool from the WYSIWYG toolbar.
- Paste the code snippet into the window which pops up and the video will be automatically added to your body content.
- Select Save Content and Close to save your WYSIWYG content and Publish your page.
The other way to do this is:
- 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.
- Go to the page you want to add the code to, Update it if it has been published, and open the WYSIWYG Editor.
- 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.
- 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 likely to be useful for third-party scripts but you may have videos you want to display on more than one page. To do this:
- From your main menu, go to More > Embed codes. You'll see a list of embed codes that have been added.
- Select Add code. A new code menu will open.
- Use the 'Name' field to give your code a descriptive name and paste your code snippet into the Embed code field.
- Save your changes.
- Go to the page you want to insert the code on and select Update if it has been published.
- Open the WYSIWYG Editor of the page, and select the Insert Plugins tools.
- In the dropdown menu, select your code. It will named this: 'Embed - [your site] - [Your embed code name]'.
- 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 have the maximum benefit. Each video should have a specific focus or message, and it is wise to create a brief script before recording so you can 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 keep accessibility in mind. You should always add closed captions or transcripts for long videos, so they can be accessed by everyone, 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 to make sure your videos are responsive such as Embed Responsively. However, 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. For videos like this, it's always best to end with a call-to-action.