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