Responsive Lazy Loaded Video
Vimeo And Youtube Videos Below
If you intend on showing videos on your website you need to make them a) fast loading and b) responsive. The loading speed is taken care of by the Sitesell Lazy Loading system. Making them responsive is dealt with by using the classes provided in this template.
The video has two classes applied to the containing section, video-wrapper and video-container. This is to make the video responsive. This will work on any video contained within an iframe. Youtube, Vimeo, etc. Try reducing your browser window (if you are viewing on a desktop sized screen) to see how the video reduces in size, and maintains the corect aspect ratio.
Here is the HTML used for to embed a responsive video.
<section class="video-wrapper video-container">
<iframe width="640" height="315" src="https://www.youtube.com/embed/R36CixkIaIc" frameborder="0" allowfullscreen ></iframe>
</section>
A Vimeo Video
Vimeo is done in exactly the same way as Youtube videos. Not so many people use this to store their videos compared to Youtube, but if you are a Vimeo user, then you have the option to display their videos responsively.