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:
09/10/2023
- v0.4.0
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