Skip to content

Making the HTML5 Video tag source responsive

License

Notifications You must be signed in to change notification settings

Fificzu/video-srcset

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Video Source Set

This library adds support for srcset attribute in HTML5's <video> element

In order to use the library - load it in your website <script src="/video-srcset.js"><script>

Set the source set on your video tag as:

<video srcset="videos/mobile-video.mp4 768w, videos/tablet-video.mp4 1200w, videos/desktop-video.mp4 1920w"></video>

And, init the library with

videoSrcset(options); // Run on all <VIDEO> elements in the page

// OR 

videoSrcset(options, document.getElementsByClassName('responsive-video')); // Run only on <VIDEO> tags with class responsive-video

Use with jQuery

The library has no dependencies, but, it defines a jQuery plugin, so, in case you use jQuery in your project you can initialize the library with:

$('video.responsive-video').videoSrcset(options);

Options

Option Name Type Default Description
resize boolean false If set to true - the library will replace the src of the videos on resize event
resizeDelay number 50 (ms) Number of milliseconds to wait after a resize event before checking for new sources. Ingored if resize: false

A few notes:

  • Currently, the library supports only width based responsiveness
  • The library doesn't support multiple sources

About

Making the HTML5 Video tag source responsive

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%