Embedding scalable videos
Instructions for embedding videos can be found in the CMS Manual, under section 11.7 Adding a video to a CMS page.
Making a video scalable
There's a way of embedding a video on CMS pages which also makes them responsive to the width of the page. This means that a video will scale to 100% of the width of the page or column.
The code you need
To enable this for a video you need to add extra tags at the start and end of the normal embed code.
At the start of the code add:
Then include your embed code as normal. At the end of the embed code, add:
So, an example of the code to embed a scalable YouTube video might look like this (the tags that make it scalable are in bold):
<div class="video-container"><iframe width="597" height="333" frameborder="0" src="http://www.youtube.com/embed/fFM2fiOrqqQ?rel=0" allowfullscreen=""></iframe></div>
If you're using the scalable video tag, it doesn't matter what dimensions you choose to embed your video at. The tag overrides any dimensions you have specified.
Things to note
- If you're embedding a Facebook video, then we recommend that you do use the code to make the video scalable
- If you're embedding a Twitter video then it is better that you don't use this code
Testing and feedback
We've tested this successfully using YouTube, Vimeo and uPlayer videos and have started using it across the website. If you do encounter any problems, please email firstname.lastname@example.org and we will do our best to help.