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.

Example of a page with a scalable video embedded

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:

<div class="video-container">

Then include your embed code as normal. At the end of the embed code, add:

</div>

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 webmarketing@sheffield.ac.uk and we will do our best to help.