# @voorhoede/vue-dato-video

Fully optimized video component for videos from Dato CMS.

# Features

  • Supports both Vimeo and YouTube.
  • Has a fixed ratio, so space is reserved before the video is loaded. This prevents annoying layout jumps.
  • Supports an optional video caption.
  • Has a cover image that lazy loads, meaning the image will only be downloaded when necessary, resulting in much faster page loads.
  • Supports autoplay.

# Installation

npm install @voorhoede/vue-dato-video

# Usage

# Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueDatoVideo from '@voorhoede/vue-dato-video'

Vue.use(VueDatoVideo)

The CSS file should be imported seperately in the way you desire. It's located at @voorhoede/vue-dato-video/dist/vue-dato-video.css.

# Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="@voorhoede/vue-dato-video/dist/vue-dato-video.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/@voorhoede/vue-dato-video"></script>

# Examples

# Youtube

# Vimeo

# API

# vue-dato-video

# props

  • video Object (required)

  • autoplay Boolean (required)

  • loop Boolean (required)

  • mute Boolean (required)