Sometimes it's useful to embed media from third-party sites into your consultations. Many sites provide 'embed codes' which are snippets of code that make it easy to include their content. For example, you can embed videos from YouTube, maps or interactive street views from Google Maps, PDF documents or slideshows from Slideshare. You can embed rich media into Citizen Space anywhere you see a rich text editor box. This includes the main consultation overview and the page descriptions, fact banks and explanatory text components inside online surveys.
Step 1: Copy the embed code
Different sites show this in different places. For example in YouTube there are sharing options underneath the main video window. This is what the YouTube embed code looks like. Copy this embed code to your clipboard:
If you would like to embed a video that is not on a video hosting service, but you have the direct link to the video itself, you can use the following embed code:
<video src="url of video here" controls style="width: 100%><a href="url of video here">Download video</a></video>
Replace "url of video here" with the actual link address (including the https:// part).
All Citizen Space sites are served via 'https'. This means that your site is certified and protected. It also means that any embedded content will also need to be served via 'https' otherwise it may not load correctly. Typically, this means checking that any URLs in the embed code start with 'https' rather than 'http'.
Step 2: Edit your consultation
Navigate to the consultation record or survey question where you want the embedded media to appear. Click the 'Embed rich media' button on the toolbar of the rich text editor - the button looks like a green roll of film:
A box will pop up where you can paste the embed code and enter more information about the content you're embedding and where the content comes from. This information is important so that visitors to Citizen Space can make an informed decision about whether to view the embedded content or not:
When you click OK, a placeholder will appear inside the Rich Text editor. This shows that your content has been embedded successfully:
You still need to scroll down and select the blue 'Save' button at the bottom of the page.
Step 3: Viewing embedded content
You can preview your consultation to view the embedded content.
Citizen Space has a feature we can enable for European customers so that whenever anyone visits a page that contains embedded content, a yellow bar appears at the top of the page asking whether they want to display the content*. Visitors can optionally save a setting that automatically loads all embedded content on the site for the rest of their visit:
More cautious visitors can read more about each item of embedded content before loading it. A placeholder appears instead of the item, with a brief description and a button to load the content:
If the EU Privacy Law does not affect you, you may prefer to load all embedded content automatically without warning visitors first. This privacy feature can be enabled or disabled site-wide by Delib on request. However, you should check your territory's privacy and cookie regulations before doing this.
Other recommendations when embedding videos from YouTube:
- Enable YouTube's 'privacy-enhanced mode' so YouTube won’t store information about visitors on your web page unless they play the video. See https://support.google.com/youtube/answer/171780?hl=en-GB
- We'd really recommend against enabling auto-play. This has implications for the user not just in terms of cookie storage, but also their data usage.
[Disclaimer: this article does not constitute legal advice]