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.
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. |
Name | Description |
---|---|
on() | Start making your video responsive |
Stashy.ElasticVideo("iframe,object,embed").on();
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.
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;
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.lessJS