SpeedkitYoutube

We have integrated SpeedkitYoutube as an example to show how iFrame content must be integrated in a performance-optimized manner. For this purpose, a separate IntersectionObserver has been implemented, which detects a longer dwell time of the component in the viewport. The iFrame is initialized only after a positive detection. This prevents immense data from having to be loaded when simply scrolling through the page. So that no empty space is visible to the user, we use the functionality of the SpeedkitPicture and preload the corresponding Youtube poster in different renditions, so the illusion is perfect for the user and he does not notice anything of the optimized lazy load procedure.

Usage

The SpeedkitYoutubeis used to initialise Youtube videos with Youtube Iframe-API.

The url of the Youtube video must be specified.

The SpeedkitPicture is used for the poster, so the generation of the poster is automated, you can define the image sizes with sizes (What is sizes?).

Learn more about SpeedkitPicture

Example

<template>
  <div>
    <speedkit-youtube v-bind="youtube" @playing="onPlaying" />
  </div>
</template>

<script setup>
import SpeedkitYoutube from '#speedkit/components/SpeedkitYoutube';

defineProps({
  url: {
    type: String,
    default: '<youtube-url>'
  },
  title: {
    type: String,
    default: 'Youtube Title'
  },
  host: {
    type: String,
    default: 'https://www.youtube.com'
  },
  options: {
    type: Object,
    default() {
      return {
        fs: false // use boolean instead of 0 or 1
      };
    }
  },
  posterSizes: {
    type: Object,
    default() {
      return {
        default: '100vw',
        md: '50vw'
      };
    }
  }
});

const onPlaying = () => console.log('Youtube Player playing!');
</script>

Properties

{
  url: '<youtube-url>',
  title: 'Player Title',
  autoplay: false,
  mute: false,
  posterSizes: { … },
  options: { … }
}

url

• Type: String

Sets a video via the youtube url.

title

• Type: String

Sets the title for the player iframe and poster.

autoplay

• Type: Boolean
  • Default: false

When set starts video in autoplay. It is required that the component is integrated via SpeedkitHydrate or is only activated when entering the visible area.

mute

• Type: Boolean
  • Default: false

When set the player is muted.

posterSizes

• Type: String
  • Default: { default: '100vw', xxs: '100vw', xs: '100vw', sm: '100vw', md: '100vw', lg: '100vw', xl: '100vw', xxl: '100vw' }

Sets the image sizes of the poster.

Learn more about sizes

options

• Type: Object

Overrides the youtube player options. These will be the same as the youtube player parameters.

Use boolean values instead of integers (e.g. 0, 1).

Learn more about Youtube Player Parameters

host

• Type: String
  • default: 'https://www.youtube-nocookie.com'

Sets the host for the player.

Slots

<template #loading-spinner>
  Loading…
</template>

<template #play>
  <span>Click!</span>
</template>

Events

<speedkit-youtube 
  @ready="console.log('Player Ready!')" 
  @playing="console.log('Player Playing!')" 
/>