1.3.8 • Published 1 day ago
@frankhoodbs/youtube-media-player-cmp v1.3.8
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>
Screenshots
1.3.7
1 day ago
1.3.4
2 days ago
1.3.8
1 day ago
1.3.3
6 days ago
1.3.2
19 days ago
1.3.1
22 days ago
1.3.0
23 days ago
1.2.17
23 days ago
1.2.16
2 months ago
1.2.14
2 months ago
1.2.15
2 months ago
1.2.13
2 months ago
1.2.12
3 months ago
1.2.11
3 months ago
1.2.10
4 months ago
1.2.9
4 months ago
1.2.8
4 months ago
1.2.7
4 months ago
1.2.6
4 months ago
1.2.3
4 months ago
1.2.2
4 months ago
1.2.1
4 months ago
1.1.46
7 months ago
1.1.45
7 months ago
1.1.44
7 months ago
1.1.40
7 months ago
1.1.39
7 months ago
1.1.37
7 months ago
1.1.36
7 months ago
1.1.35
7 months ago
1.1.34
7 months ago
1.1.33
8 months ago
1.1.32
8 months ago
1.1.31
8 months ago