Lite YouTube Embed Component For Vue

Install & Download:

# NPM
$ npm i vue-lite-youtube-embed

Description:

A lightweight, fast, and performant Youtube video embed component for Vue 3/2 applications.

How to use it:

1. Install and import the vue-lite-youtube-embed component.

import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
import 'vue-lite-youtube-embed/style.css'

2. Embed a Youtube video into your app.

<template>
  <LiteYouTubeEmbed
    id="Video ID"
    title="Video Description"
  />
</template>

3. Available component props.

announce: {
  type: String,
  required: false,
  default: 'Watch',
},
id: {
  type: String,
  required: true,
},
title: {
  type: String,
  required: true,
},
activatedClass: {
  type: String,
  required: false,
  default: 'lyt-activated',
},
adNetwork: {
  type: Boolean,
  required: false,
  default: true,
},
iframeClass: {
  type: String,
  required: false,
  default: '',
},
cookie: {
  type: Boolean,
  required: false,
  default: false,
},
params: {
  type: String,
  required: false,
  default: '',
},
playerClass: {
  type: String,
  required: false,
  default: 'lty-playbtn',
},
playlist: {
  type: Boolean,
  required: false,
  default: false,
},
playlistCoverId: {
  type: String,
  required: false,
  default: '',
},
poster: {
  type: String as PropType<ImageResolution>,
  required: false,
  default: 'hqdefault',
},
wrapperClass: {
  type: String,
  required: false,
  default: 'yt-lite',
},
muted: {
  type: Boolean,
  required: false,
  default: false,
},
thumbnail: {
  type: String,
  required: false,
},
webp: {
  type: Boolean,
  required: false,
  default: false,
},
rel: {
  type: String as PropType<'prefetch' | 'preload'>,
  required: false,
  default: 'preload',
},
aspectHeight: {
  type: Number,
  required: false,
  default: 9,
},
aspectWidth: {
  type: Number,
  required: false,
  default: 16,
},

4. API methods.