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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/vUIUbK5nGCU" frameborder="0" allowfullscreen></iframe>

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

(This is for a 16:9 format video. For a 4:3 format, change the end of the first tag so it reads -responsive-4by3)

<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/vUIUbK5nGCU?rel=0" > </iframe></div>

The ?rel=0 part will prevent 'related' videos being displayed

Embed a Vimeo video

The code is very similar; the embed code from Vimeo might be something like

<iframe src="https://player.vimeo.com/video/68859701" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> <p><a href="https://vimeo.com/68859701">Rotary's Vision for a Better World</a> from <a href="https://vimeo.com/rotary">Rotary International</a>on <a href="https://vimeo.com">Vimeo</a>.</p>

whereas, all you need is

<div class="embed-responsive embed-responsive-16by9"> <iframe src="//player.vimeo.com/video/68859701"></iframe> </div>

note the video number 68859701 is the part to change