# @frankhoodbs/youtube-media-player-cmp

> Youtube Media Player component

Latest version **5.0.0** (published 2026-03-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @frankhoodbs/youtube-media-player-cmp
pnpm add @frankhoodbs/youtube-media-player-cmp
yarn add @frankhoodbs/youtube-media-player-cmp
bun add @frankhoodbs/youtube-media-player-cmp
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-03-04 |
| First published | 2023-10-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Frankhood Business Solutions s.r.l. |
| Maintainers | giando110188, frankhood-info, skill83, m.brandonisio |

## Links

- npm: https://www.npmjs.com/package/@frankhoodbs/youtube-media-player-cmp
- npm.io page: https://npm.io/package/@frankhoodbs/youtube-media-player-cmp

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.5.29
- [@frankhoodbs/slot-helper](https://npm.io/package/@frankhoodbs/slot-helper.md) ^5.0.0
- [@frankhoodbs/logging-utilities](https://npm.io/package/@frankhoodbs/logging-utilities.md) ^5.0.0

## Recent versions

- 5.0.0 (latest) — 2026-03-04
- 4.0.3 — 2025-11-26
- 4.0.2 — 2025-11-19
- 4.0.1 — 2025-11-12
- 4.0.0 — 2025-10-24
- 3.0.4 — 2025-07-17
- 3.0.3 — 2025-06-04
- 3.0.2 — 2025-05-27
- 3.0.1 — 2025-05-15
- 3.0.0 — 2025-04-24
- 2.0.5 — 2025-02-17
- 2.0.4 — 2024-11-05
- 2.0.3 — 2024-10-24
- 2.0.2 — 2024-10-01
- 2.0.1 — 2024-09-30
- … 38 more at https://npm.io/package/@frankhoodbs/youtube-media-player-cmp/versions

## README

# Youtube video component

Componente per riprodurre video di youtube.

Component to play YouTube videos.

![Version](https://img.shields.io/npm/v/@frankhoodbs/youtube-media-player-cmp)
![License](https://img.shields.io/npm/l/@frankhoodbs/youtube-media-player-cmp)

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

```vue
<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

![Component Screenshot](https://i.imgur.com/HDcpIPL.png)

---
_Source: https://npm.io/package/@frankhoodbs/youtube-media-player-cmp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._