Youtube video component

Componente per riprodurre video di youtube.

Component to play YouTube videos.

API Reference

Slots

const slots = defineSlots<{
  duration: () => VNode[];
  title: () => VNode[];
  btnPlay: () => VNode[];
  caption: () => VNode[];
}>();

Props

| Name | Type | Description | |:------------------------------|:----------|:---------------------------------------------------------------------------| | data-youtube-video-id | string | Required. id of the video. | | data-aspect-ratio |string | default is ```16:9```. video aspect ratio value. | |data-background-image-src |string | default is ```empty string```. background image. | |data-get-youtube-script-api|string | default is ```https://www.youtube.com/iframe_api```. url to get YT script. | |data-debug |boolean` | default is false. show debug features. |

CSS variables

| Name | default | Description | |:------------------------------------------------|:----------------------|:--------------------------------------------------------------------| | --youtube-media-player-border-radius | 8px | .responsive-video, .responsive-video::before, iframe border-radius | | --youtube-media-player-bgcolor | #000000 | .responsive-video background | | --youtube-media-player-before-z-index | 1 | .responsive-video::before z-index | | --youtube-media-player-before-bg-color | #000000 | .responsive-video::before background | | --youtube-media-player-iframe-z-index | 12 | iframe z-index | | --youtube-media-player-play-z-index | 11 | .play z-index | | --youtube-media-player-play-color | rgba(#ffffff, 0.75) | .play color | | --youtube-media-player-play-hover-color | #ffffff | .play:hover color | | --youtube-media-player-play-width | 64px | .play img/svg width | | --youtube-media-player-play-height | 64px | .play img/svg height | | --youtube-media-player-over-info-z-index | 10 | .over-info z-index | | --youtube-media-player-over-info-bottom | 24px | .over-info bottom | | --youtube-media-player-over-info-left | 24px | .over-info left | | --youtube-media-player-over-info-color | rgba(#ffffff, 0.75) | .over-info > div color | | --youtube-media-player-caption-padding-top | 24px | .caption padding | | --youtube-media-player-caption-padding-bottom | 0px | .caption padding | | --youtube-media-player-caption-padding-left | 24px | .caption padding | | --youtube-media-player-caption-padding-right | 24px | .caption padding | | --youtube-media-player-caption-color | #000000 | .caption color | | --youtube-media-player-caption-text-align | left | .caption text-align |

Usage/Examples

<template>
  <div class="App">
    <div class="container-fluid container-xl py-16">
      <div class="row gy-10 justify-content-center">
        <div class="col-lg-10 col-xl-8">
          <youtube-media-player-cmp data-youtube-video-id="l40nk18GUzk">
            <template #duration>23:00</template>
            <template #title>TITOLO</template>
            <template #btnPlay>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1em"
                viewBox="0 0 512 512"
              >
                <path
                  fill="currentColor"
                  d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"
                />
              </svg>
            </template>
          </youtube-media-player-cmp>
        </div>
        <div class="col-lg-10 col-xl-8">
          <youtube-media-player-cmp data-youtube-video-id="Zv11L-ZfrSg">
            <template #duration>23:00</template>
            <template #title>TITOLO</template>
            <template #btnPlay>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1em"
                viewBox="0 0 512 512"
              >
                <path
                  fill="currentColor"
                  d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"
                />
              </svg>
            </template>
          </youtube-media-player-cmp>
        </div>
        <div class="col-lg-10 col-xl-8">
          <youtube-media-player-cmp data-youtube-video-id="aCzjEmu-zWw">
            <template #duration>23:00</template>
            <template #title>TITOLO</template>
            <template #btnPlay>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1em"
                viewBox="0 0 512 512"
              >
                <path
                  fill="currentColor"
                  d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"
                />
              </svg>
            </template>
          </youtube-media-player-cmp>
        </div>
      </div>
    </div>
  </div>
</template>

Screenshots