Skip to content

Making the HTML5 Video tag source responsive

License

Notifications You must be signed in to change notification settings

woutgg/video-srcset

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 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%