ElasticVideo

Adapt videos to any screen size

  Download   View project on Github

The new HTML5 <video> tag is very easy to make responsive. You only have to adjust its width to max-size : 100% and height : auto and you are done. But, did you ever try to do the same with iframes, objects, ... etc?. These type of tags are the ones we use to embed videos from external sites like Youtube, Vimeo, ... It´s difficult to style them.

This component try to help you making your videos responsive.

In the playground section you can check some samples.

Constructor

Stashy.ElasticVideo(selector)
Parameter Type Default Description
selector string none CSS selector for your videos. Select the iframe, object or embed. In the Stashy.ElasticVideos.css stylesheet its included the proper styles for the <video> so you don´t need to call the constructor for this type of videos.

Methods

Name Description
on() Start making your video responsive

Sample

Stashy.ElasticVideo("iframe,object,embed").on();

Shrink your browser window and see the videos adapting its size

You can try with any type of video vendors but is possible the component don´t work wth all of them. Youtube, DailyMotion, Vimeo and HTML5 videos are supported like you can check in these samples.

Youtube video with the new iframe code

Youtube video with the old object code

HTML5 using <video> tag

Note that is no needed using Stashy.ElasticVideo.js with the video tag. Is enough with Stashy.ElasticVideo.css or even styling yourself using max-width:100% and height:auto;

Vimeo video using iframe

DailyMotion video using iframe

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.ElasticVideo.less

JS

jQuery.js Stashy.ElasticVideo.js