Vue Responsive Video

A video element that will swap out its src based on the size of the window.

But why?

With a <picture> element you can provide multiple <source> child elements and use the media attribute on them to control when each one is used.

However, with the <video>, while it does support the <source> element as a child, it doesn't support the media attribute on its children.

This is annoying and leaves us with the challenge of finding a way to not provide huge videos to mobile devices.

This package tries to provide a way to do that.

Installation

npm install --save vue-responsive-video

# or

yarn add vue-responsive-video

Setup

First, add the component to your project. This code may vary depending on your setup.

import VueResponsiveVideo from 'vue-responsive-video';
Vue.component('responsive-video', VueResponsiveVideo);

Example

<responsive-video
    mobile-src="my-video-sml.mp4"
    desktop-src="my-video-med.mp4"
></responsive-video>

Limitations / Todo

Currently we're only supporting 2 sizes but we should be able to refactor it to support an arbitrary number of sizes.

An issue on iOS Safari 15 has meant that we can't provide a poster attribute which means we have no fallback if videos fail to play.