@frankhoodbs/youtube-media-player-cmp NPM

Youtube video component

Componente per riprodurre video di youtube.

Component to play YouTube videos.

Version License

API Reference

Slots

const slots = defineSlots<{
  duration(): any;
  title(): any;
  iconPlay(): any;
  caption(): any;
}>();

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 #iconPlay>
              <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 #iconPlay>
              <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 #iconPlay>
              <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>