diff --git a/docs/components/LImageOverlay.md b/docs/components/LImageOverlay.md
index e4cdc8c8..cf1861aa 100644
--- a/docs/components/LImageOverlay.md
+++ b/docs/components/LImageOverlay.md
@@ -59,7 +59,6 @@ export default {
 | visible             |                                                      | boolean | -      | true          |
 | interactive         |                                                      | boolean | -      | false         |
 | bubblingMouseEvents |                                                      | boolean | -      | true          |
-| url                 |                                                      | string  | -      |               |
 | bounds              |                                                      |         | -      |               |
 | opacity             |                                                      | number  | -      | 1.0           |
 | alt                 |                                                      | string  | -      | ''            |
@@ -68,6 +67,7 @@ export default {
 | zIndex              |                                                      | number  | -      | 1             |
 | className           |                                                      | string  | -      | ''            |
 | options             | Leaflet options to pass to the component constructor | object  | -      | {}            |
+| url                 |                                                      | string  | -      | null          |
 
 ## Events
 
diff --git a/docs/components/LVideoOverlay.md b/docs/components/LVideoOverlay.md
new file mode 100644
index 00000000..648c1ed4
--- /dev/null
+++ b/docs/components/LVideoOverlay.md
@@ -0,0 +1,74 @@
+---
+title: LVideoOverlay
+---
+
+# LVideoOverlay
+
+> Easily display a video overlay.
+
+---
+
+## Demo
+
+::: demo
+<template>
+<l-map style="height: 350px" :zoom="zoom" :center="center">
+<l-tile-layer :url="url"></l-tile-layer>
+<l-video-overlay :video="video" :bounds="bounds"></l-video-overlay>
+</l-map>
+</template>
+
+<script>
+import {LMap, LVideoOverlay, LTileLayer} from 'vue2-leaflet';
+
+export default {
+  components: {
+    LMap,
+    LVideoOverlay,
+    LTileLayer
+  },
+  data () {
+    return {
+      zoom: 4,
+      center: [25, -110],
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      video: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+      bounds: [[ 32, -130], [ 13, -100]]
+    };
+  }
+}
+</script>
+
+:::
+
+## Props
+
+| Prop name           | Description                                          | Type                            | Values | Default       |
+| ------------------- | ---------------------------------------------------- | ------------------------------- | ------ | ------------- |
+| pane                |                                                      | string                          | -      | 'overlayPane' |
+| attribution         |                                                      | string                          | -      | null          |
+| name                |                                                      | string                          | -      | undefined     |
+| layerType           |                                                      | string                          | -      | undefined     |
+| visible             |                                                      | boolean                         | -      | true          |
+| interactive         |                                                      | boolean                         | -      | false         |
+| bubblingMouseEvents |                                                      | boolean                         | -      | true          |
+| bounds              |                                                      |                                 | -      |               |
+| opacity             |                                                      | number                          | -      | 1.0           |
+| alt                 |                                                      | string                          | -      | ''            |
+| crossOrigin         |                                                      | boolean                         | -      | false         |
+| errorOverlayUrl     |                                                      | string                          | -      | ''            |
+| zIndex              |                                                      | number                          | -      | 1             |
+| className           |                                                      | string                          | -      | ''            |
+| autoplay            |                                                      | boolean                         | -      | true          |
+| loop                |                                                      | boolean                         | -      | true          |
+| keepAspectRatio     |                                                      | boolean                         | -      | true          |
+| muted               |                                                      | boolean                         | -      | false         |
+| options             | Leaflet options to pass to the component constructor | object                          | -      | {}            |
+| video               |                                                      | string\|array\|HTMLVideoElement | -      | null          |
+
+## Events
+
+| Event name     | Type    | Description                                        |
+| -------------- | ------- | -------------------------------------------------- |
+| update:visible | boolean | Triggers when the visible prop needs to be updated |
+| ready          | object  | Triggers when the component is ready               |
diff --git a/src/components/LImageOverlay.vue b/src/components/LImageOverlay.vue
index c9789884..842352da 100644
--- a/src/components/LImageOverlay.vue
+++ b/src/components/LImageOverlay.vue
@@ -10,6 +10,13 @@ import { imageOverlay, DomEvent } from 'leaflet';
 export default {
   name: 'LImageOverlay',
   mixins: [ImageOverlayMixin, Options],
+  props: {
+    url: {
+      type: String,
+      custom: true,
+      default: null
+    }
+  },
   mounted() {
     const options = optionsMerger(this.imageOverlayOptions, this);
     this.mapObject = imageOverlay(this.url, this.bounds, options);
diff --git a/src/components/LVideoOverlay.vue b/src/components/LVideoOverlay.vue
new file mode 100644
index 00000000..c3ea940f
--- /dev/null
+++ b/src/components/LVideoOverlay.vue
@@ -0,0 +1,72 @@
+<script>
+import { optionsMerger, propsBinder, findRealParent } from '../utils/utils.js';
+import VideoOverlayMixin from '../mixins/VideoOverlay.js';
+import Options from '../mixins/Options.js';
+import { videoOverlay, DomEvent } from 'leaflet';
+
+/**
+ * Easily display a video overlay.
+ */
+export default {
+  name: 'LVideoOverlay',
+  mixins: [VideoOverlayMixin, Options],
+  props: {
+    video: {
+      type: [String, Array, HTMLVideoElement],
+      default: null
+    }
+  },
+  mounted() {
+    const options = optionsMerger(this.videoOverlayOptions, this);
+    this.mapObject = videoOverlay(this.video, this.bounds, options);
+    DomEvent.on(this.mapObject, this.$listeners);
+    propsBinder(this, this.mapObject, this.$options.props);
+    this.parentContainer = findRealParent(this.$parent);
+    this.parentContainer.addLayer(this, !this.visible);
+    this.$nextTick(() => {
+      /**
+       * Triggers when the component is ready
+       * @type {object}
+       * @property {object} mapObject - reference to leaflet map object
+       */
+      this.$emit('ready', this.mapObject);
+    });
+  },
+  render() {
+    return null;
+  },
+};
+</script>
+
+<docs>
+## Demo
+::: demo
+<template>
+  <l-map style="height: 350px" :zoom="zoom" :center="center">
+    <l-tile-layer :url="url"></l-tile-layer>
+    <l-video-overlay :video="video" :bounds="bounds"></l-video-overlay>
+  </l-map>
+</template>
+
+<script>
+import {LMap, LVideoOverlay, LTileLayer} from 'vue2-leaflet';
+
+export default {
+  components: {
+    LMap,
+    LVideoOverlay,
+    LTileLayer
+  },
+  data () {
+    return {
+      zoom: 4,
+      center: [25, -110],
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      video: 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+      bounds: [[ 32, -130], [ 13, -100]]
+    };
+  }
+}
+</script>
+:::
+</docs>
diff --git a/src/index.js b/src/index.js
index 2516e998..6fff7be9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,4 +37,5 @@ export { default as LPopup } from './components/LPopup';
 export { default as LRectangle } from './components/LRectangle';
 export { default as LTileLayer } from './components/LTileLayer';
 export { default as LTooltip } from './components/LTooltip';
+export { default as LVideoOverlay } from './components/LVideoOverlay';
 export { default as LWMSTileLayer } from './components/LWMSTileLayer';
diff --git a/src/mixins/ImageOverlay.js b/src/mixins/ImageOverlay.js
index e78c3162..797a8a57 100644
--- a/src/mixins/ImageOverlay.js
+++ b/src/mixins/ImageOverlay.js
@@ -4,10 +4,6 @@ import InteractiveLayer from './InteractiveLayer';
 export default {
   mixins: [Layer, InteractiveLayer],
   props: {
-    url: {
-      type: String,
-      custom: true
-    },
     bounds: {
       custom: true
     },
diff --git a/src/mixins/VideoOverlay.js b/src/mixins/VideoOverlay.js
new file mode 100644
index 00000000..0808b61d
--- /dev/null
+++ b/src/mixins/VideoOverlay.js
@@ -0,0 +1,40 @@
+import ImageOverlay from './ImageOverlay.js';
+
+export default {
+  mixins: [ImageOverlay],
+  props: {
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    keepAspectRatio: {
+      type: Boolean,
+      default: true
+    },
+    muted: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    this.videoOverlayOptions = {
+      ...this.imageOverlayOptions,
+      autoplay: this.autoplay,
+      loop: this.loop,
+      keepAspectRatio: this.keepAspectRatio,
+      muted: this.muted
+    };
+  },
+  methods: {
+    getElement () {
+      return this.mapObject.getElement();
+    }
+  },
+  render () {
+    return null;
+  }
+};
diff --git a/types/index.d.ts b/types/index.d.ts
index 110d9280..b8032aa4 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -69,12 +69,29 @@ declare module "vue2-leaflet" {
      */
     zIndex: number;
   }
-  class ImageOverlay extends Mixins(Layer, InteractiveLayer) {
+  class VideoOverlay extends Mixins(ImageOverlay) {
     // props
-    url: string;
     /**
      * @default true
      */
+    autoplay: boolean;
+    /**
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * @default true
+     */
+    keepAspectRatio: boolean;
+    /**
+     * @default false
+     */
+    muted: boolean;
+    // methods
+    getElement(): HTMLVideoElement;
+  }
+  class ImageOverlay extends Mixins(Layer, InteractiveLayer) {
+    // props
     bounds: boolean;
     /**
      * @default 1.0
@@ -488,7 +505,25 @@ declare module "vue2-leaflet" {
     // methods
     setImagePath(newVal: string, oldVal?: string): void;
   }
+  class LVideoOverlay extends Mixins(VideoOverlay) {
+    // props
+    /**
+     * @default null
+     */
+    video: string | Array<string> | HTMLVideoElement | null;
+
+    // data
+    mapObject: L.VideoOverlay;
+    parentContainer: any;
+  }
   class LImageOverlay extends Mixins(ImageOverlay) {
+    // props
+    /**
+     * @default null
+     */
+    url: string | null;
+
+    // data
     mapObject: L.ImageOverlay;
     parentContainer: any;
   }
@@ -724,6 +759,7 @@ declare module "vue2-leaflet" {
     LGridLayer,
     LIcon,
     LIconDefault,
+    LVideoOverlay,
     LImageOverlay,
     LLayerGroup,
     LMap,