Embedding You Tube and Vimeo videos in your pages

If you have videos on your site, they may look fine when viewed on your desktop or laptop screen - but fail when viewed on a phone or tablet, as the screen size is smaller than the 'static' dimensions you've specified.

Fortunately, making them responsive to the different screen widths is fairly easy, though it does mean you need to edit code. It's not as tricky as it might appear!

Making a YouTube video responsive:

YouTube will provide you with code similar to the following:-

Most of this is unnecessary and is unsuitable for viewing on a phone - and it causes pages to fail W3C accessibility checks, so it's worth amending

• Go to update the page you want the video on.
• Click the 'Source' button to view the code behind the page.

In the code above, the 3hQKM5kQL18 part is the important bit; copy (Ctrl+C on PC Cmd+C on Mac) the code below and replace zpOULjyy-n8 with your video code.

Making a Vimeo video responsive:

You will receive some code like the following if trying to embed a Vimeo video:

O B S C U R A from Duncan Wolfe on Vimeo.

The 770741142 part is all you need; copy the code below, replacing 770741142 with your video number