My implementation on Vanilla JS.
In the video
tag, as the data-src
attribute, specify the path to the default video. Inside the video
tag, in the source
tags, we specify the value of the two attributes data-src
and data-mw
.
data-src
- is the path to the video file.
data-mw
- is the maximum screen width at which this video should be shown.
This solution works automatically when the screen width changes. This is done using the resize()
function.
<video id="intro-video" data-src="/path/default.mp4" poster="img/poster.png" controls>
<source data-src="/path/1600.mp4" data-mw="1600">
<source data-src="/path/900.mp4" data-mw="900">
<source data-src="/path/480.mp4" data-mw="480">
</video>
class VideoResponser {
constructor(selector) {
const $video = document.querySelector(selector);
this.options = {
selector,
breakpoints: { default: { src: $video.getAttribute('data-src') } }
};
// get a list of video switching points and links to the videos themselves
$video.querySelectorAll('[data-src]').forEach(element => this.options.breakpoints[element.getAttribute('data-mw')] = { src: element.getAttribute('data-src') });
$video.innerHTML = ''; // we clean up so that there is nothing superfluous
// run the handler and track the change in screen width
this.responseVideo(this.options);
this.resizer();
}
/** Function runs on resize */
resizer() {
window.addEventListener("resize", () => this.responseVideo(this.options));
}
/**
* Change src value of video link to fit screen width
*
* @param {Object} options object with options
*/
responseVideo(options) {
const {selector, breakpoints} = options; // get options
let $video = document.querySelector(selector);
const widthNow = $video.getAttribute('data-width-now') || null;
const maxBreakpoint = Math.max.apply(Math, Object.keys(breakpoints).filter(key => key <= document.body.clientWidth).map(Number));
const nowBreakpoint = maxBreakpoint || 'default'; // choose either the maximum value, if not, then the default
if(widthNow && widthNow == nowBreakpoint) return; // check if the video needs to be changed
$video.setAttribute('data-width-now', nowBreakpoint);
$video.src = breakpoints[nowBreakpoint].src;
}
}
new VideoResponser("#intro-video");