@frankhoodbs/youtube-media-player-cmp
v1.3.11
Published
Youtube Media Player component
Downloads
92
Keywords
Readme
Youtube video component
Componente per riprodurre video di youtube.
Component to play YouTube videos.
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>