Making your YouTube and Vimeo videos 'responsive'.

Embed responsive videos in your page. 'Responsive' elements change size when viewed on different devices, such as phones or tablets

Rotary has a number of great videos that deserve a wider audience, so why not make the most of them and a) brighten up your site and b) spread the word!

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

Fortunately, making them responsive to the different screen widths is as easy as it was to add them to the page initially!

Adding a YouTube video:

• Go to update the page that has the video on it (if you are changing an existing video).
• Switch to 'Source' view so you see the code.
• The current source code - or the one provided by YouTube if adding a new video - will look something like:

 height="315" src="https://www.youtube.com/embed/vUIUbK5nGCU" frameborder="0" allowfullscreen="">

The vUIUbK5nGCU part is important; copy the code below and replace zpOULjyy-n8 with your video code. 

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>