SpeedkitYoutube
Please note the privacy policy when using. Google Youtube-API is integrated via dependency
youtube-player
.
Since the SpeedkitYoutube
(Experimental) is still marked as experimental, we still offer the simplified version called SpeedkitYoutube
. Here, all resources that are generated fully automatically in the experimental module must be defined manually.
Except for the manual resource definition for the poster, all other features of SpeedkitYoutube
(Experimental) are identical.
Usage
The SpeedkitYoutube
differs from the SpeedkitYoutube
(Experimental) in the definition of the poster
.
A SpeedkitPicture
must be additionally defined in the poster
property.
Learn more about SpeedkitPicture
Example
<template>
<div>
<speedkit-youtube v-bind="youtube" @playing="onPlaying" />
</div>
</template>
<script>
import SpeedkitYoutube from '#speedkit/components/SpeedkitYoutube';
export default {
components: { SpeedkitYoutube },
data () {
return {
youtube: {
id: 'youtube-id',
host: 'https://www.youtube-nocookie.com',
config: { … },
poster: {
placeholders: [
{
format: 'jpg',
url: 'data:image/jpeg;base64,…'
}
],
sources: [
{
format: 'jpg',
sizes: [
{ width: 414, url: 'poster-414.jpg' },
{ width: 576, media: '(min-width: 576px)', url: 'poster-576.jpg' },
{ width: 768, media: '(min-width: 768px)', url: 'poster-768.jpg' },
{ width: 1024, media: '(min-width: 1024px)', url: 'poster-1024.jpg' },
{ width: 1280, media: '(min-width: 1200px)', url: 'poster-1280.jpg' }
]
},
{
format: 'webp',
sizes: [
{ width: 414, url: 'poster-414.webp') },
{ width: 576, media: '(min-width: 576px)', url: 'poster-576.webp' },
{ width: 768, media: '(min-width: 768px)', url: 'poster-768.webp' },
{ width: 1024, media: '(min-width: 1024px)', url: 'poster-1024.webp' },
{ width: 1280, media: '(min-width: 1200px)', url: 'poster-1280.webp' }
]
}
],
alt: 'Youtube Alt',
title: 'Youtube Title'
}
}
};
},
methods: {
onPlaying () {
console.log('Youtube Player playing!');
}
}
};
</script>
Properties
{
id: 'youtube-id',
autoplay: false,
host: 'https://www.youtube-nocookie.com',
config: { … }
}
All properties except poster
are identical to SpeedkitYoutube
.
Learn more about SpeedkitYoutube
(Experimental) - Properties.
poster
- Type:
Object
The SpeedkitPicture is used as the configuration.- required
Poster is displayed as long as the player is not playing.
Events
More on events at SpeedkitYoutube
(Experimental) - Events.