Embeds

Embedding video and more

A quick note about YouTube videos: If you're wanting to embed a YouTube video specifically, please first explore if the Gallery widget works for you.

Embedding content on your site from services such as youtube, vimeo and soundcloud can be achieved using standard WordPress Embeds. These work by detecting URLs in the content of pages and posts, and automatically embedding content from these URLs if the service is supported. Please be aware that embedding content from these services may result in cookies from these services being set in visitor’s browsers. I you do embed content on your site, please ensure you declare all cookies on your privacy page.

It may be possible to embed content from other services which provide embed code to use on your site in the form of an <iframe> tag. For example, the embed code for a youtube.com video looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/EweWaCekXR" frameborder="0" allowfullscreen></iframe>

Note: All <iframe> and <script> tags are stripped from the WordPress editor when your content is saved, so embedding using scripts is not permitted, and <iframe> tags should be converted to shortcodes before saving.

To do this you must change this embed code to a WordPress “shortcode” by changing it to use square brackets [ ] at the start and end rather than angle brackets < >. There are usually 4 brackets to replace.

Accessibility note: To improve accessibility, when you're putting in your iframe code, make sure you add a title attribute (eg. title="Aerial footage of campus") think of this as similar to using alt tags for describing images!

We have a dedicated guide on how to upload and embed videos via the University's Panopto system.

Maps

Google map embed options If you want to embed a Google Map, the process is similar.

Find the map location you wish to display then there should be a "Share" option. Select that and go to the "Embed a map" option. Copy the HTML created for the embed.

Then, paste that into a text editor application (eg. notepad), do a find and replace to swap "<" for "[" and ">" for "]" and then paste that into your page.

You should end up with something like this:

Microsoft Forms

The process is similar for embedding Microsoft Forms into your WordPress site.

Create a Form (Guidance on Microsoft Forms for UoL Staff here) and select 'Collect Responses'. You'll be able to configure settings for who can fill in the form and you should also see an option to get an embed code which looks like this:

As described with Videos and Maps above, you will need to convert the embed code into a WordPress shortcode by replacing the angled brackets for square brackets. Swap any "<" for "[" and ">" for "]" and then paste the embed code into your page and save it, your Form will now display on the website.