@tryangled/vue-video youtube and vimeo component for Vue.js

TL;DR

Component to take as input Youtube and/or Vimeo urls and return the correct video url, type (youtube/vimeo), valid/invalid and thumbnail url.

• Demo Link - https://ve1jk.csb.app/

Features

• Lightweight (<6KB gzipped)
• Dependency free
• Mobile support
• Returns an array of videos
• Retreives the thumbnail of the video

Usage

A. Globally

import Vue from 'vue'
import vue-video from '@tryangled/vue-video'

// register component <vue-video>
Vue.use(vue-video)

B. Use as component: https://codesandbox.io/embed/vue-video-sample-app-ve1jk?fontsize=14

<template>
  <div>
    <vue-video
      thumbWidthPX="100"
      urlInputBorder="blue"
      urlInputTextColor="green"
      urlInputPlaceholderText="Add Youtube / Vimeo Link"
      urlInputTextHeightPX="30"
      limitVideoTo="3"
      @VideoDeleted="onVideoDeleted"
      @thumbnailClick="onThumbClicked"
      @VideoAdded="onVideoAdded"
      @VideoUrlError="onVideoUrlError"
    ></vue-video>
  </div>
</template>

<script>
  import {vueVideo} from '@tryangled/vue-video'

  export default {
    data () {
      return {
        }
      },
    methods: {
      onVideoDeleted(value) {
        //write your code here
        console.log(value.position);
        console.log(value.videos);
        console.log(value.video);
        },
      onThumbClicked(url) {
        //write your code here
        console.log(url);
        },
      onVideoAdded(value) {
        //write your code here
        console.log(value.videos);
        console.log(value.video);
        },
      onVideoUrlError(url) {
        //write your code here
        console.log(url);
        }
      }
    }
</script>

Custom attributes

| Attribute | Required | Type | Default | Description | |-------------------------|----------|---------|---------------------------------|------------------------------| | thumbWidthPX | optional | String | "100" | Thumbnail Width in px | | urlInputBorder | optional | String | "gray" | Input Border Color | | urlInputTextColor | optional | String | "black" | Input Text Color | | urlInputPlaceholderText | optional | String | "Video link (Youtube or Vimeo)" | Input placeholder Text | | urlInputTextHeightPX | optional | String | "30" | Input Height in px | | limitVideoTo | optional | String | "-1" | Limit of videos ("-1" = unlimited) |

Event handlers

| Event handler | Parameter | Type | Description | |----------------|---------------------------|-------------------------------------------------------------------------------------|---------------------------------|------------------------------| | VideoDeleted | {position, video, videos} | {String, {Url, isValid, thumbUrl, type}, [{Url, isValid, thumbUrl, type}, ... ]} | event triggered when a video is deleted from the list | | thumbnailClick | videoUrl | String | event triggered when a thumbnail is clicked, parameter passed is the video URL | | VideoAdded | {video, videos} | {{Url, isValid, thumbUrl, type}, [{Url, isValid, thumbUrl, type}, ... ]} | event triggered when a valid video is added to the list | | VideoUrlError | url | String | event triggered when the url entered cannot be resolved to a valid youtube / vimeo url |

References

• https://developer.vimeo.com/api/guides/start