YouTube Iframe API Wrapper For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-ytframe
# NPM
$ npm i vue3-ytframe

Description:

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:

Changelog:

12/20/2023

• v0.4.0