YouTube Iframe API Wrapper For Vue 3

A YouTube Iframe API wrapper based on the Composition API.

How to use it:

1. Import and register the component.

import VueYtframe from "vue3-ytframe";
createApp(App)
  .use(VueYtframe)
  .mount('#app')

2. In the template:

<VueYtframe
  v-for="video in videosSet1"
  :key="video"
  ref="yt"
  :video-id="video"
  height="400"
  width="100%"
  :player-vars="{ autoplay: 0, listType: 'user_uploads' }"
  @state-change="onStateChange"
/>

3. API methods.

  • playVideo
  • pauseVideo
  • stopVideo
  • seekTo
  • nextVideo
  • previousVideo
  • playVideoAt
  • mute
  • unMute
  • isMuted
  • setVolume
  • getVolume
  • setSize
  • setShuffle
  • setLoop
  • getDuration
  • getCurrentTime
  • getVideoStartBytes
  • getVideoBytesLoaded
  • getVideoBytesTotal
  • getVideoEmbedCode
  • getVideoUrl
  • getVideoLoadedFraction
  • getPlayerState
  • getPlaybackRate
  • setPlaybackRate
  • getAvailablePlaybackRates
  • getOptions
  • getAnOption
  • setAnOption
  • getSphericalProperties
  • setSphericalProperties
  • getPlaylist
  • getPlaylistIndex
  • getIframe
  • destroy
  • loadVideoById
  • cueVideoById
  • loadVideoByUrl
  • cueVideoByUrl
  • cuePlaylist
  • loadPlaylist
  • getVideoIdFromYoutubeURL

4. Events.

  • @ready
  • @stateChange
  • @playing
  • @paused
  • @ended
  • @error
  • @apiChange
  • @playbackQualityChange
  • @playbackRateChange

Preview:

YouTube Iframe API Wrapper For Vue 3

Changelog:

05/19/2023

  • v0.3.3

Download Details:

Author: kiranparajuli589

Live Demo: https://kiranparajuli589.github.io/vue3-ytframe/#/

Download Link: https://github.com/kiranparajuli589/vue3-ytframe/archive/refs/heads/master.zip

Official Website: https://github.com/kiranparajuli589/vue3-ytframe

Install & Download:

# Yarn
$ yarn add vue3-ytframe

# NPM
$ npm i vue3-ytframe
Tags:

Add Comment