Embedding rich media

Sometimes it's useful to embed media from third-party sites into your activities. 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 bar. This includes the overview page and the page descriptions, fact banks and explanatory text components within the online survey.

Note that embedded media requires the visitor to be using an up-to-date browser, and some embed methods may require the visitor's browser to support Javascript. It may also reduce the accessibility of your activity.

How to embed rich media

Step 1: Copy the embed code

Different sites show this in different places. The key is to look for a 'Share' button or link. For example in YouTube there is a sharing option underneath the main video window. From the 'Share' window, you want to find /select an embed code which you can then copy to your clipboard:

Screenshot of Youtube video from Scottish Parliament titled 'Embedding Public Participation in the Work of the Scottish Parliament', with options to subscribe, like, share, or download. The 'Share' button is where you can find the embed code.

Example code:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/0Q4aQLOJim0?si=Uysh-Ln86SVhEAuS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

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 activity

Navigate to the activity or survey question where you want the embedded media to appear. Select the 'Embed' button on the toolbar of the rich text editor and then select 'Rich media' from the dropdown list:

Text editor toolbar with embed dropdown list of options, including option for Rich media.

A box will pop up where you can paste the embed code and enter more information about the content you are 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:

Embed rich media screen with embed code section, description and providers name and site. Screenshot.

When you select OK, a placeholder will appear inside the Rich Text editor. This shows that your content has been embedded successfully:

Example of rich media embed with the square placeholder visible in the text editor. Screenshot.

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 activity to view the embedded content.

Note: 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:


Browser overlay message bar asking if embedded content should be loaded and if your choice should be remembered. Screenshot.

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:

Message states: There is embedded content here that could set third party cookies. Do you want to load it? Screenshot.

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 more detailed embedding video guidance on Youtube Help (opens in new tab).
  • 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]