# Videó elem

> A Videó elem beállításai YouTube-, Vimeo- és saját videóforráshoz, előnézeti kép, átfedés és ismert probléma.

A **Videó** elem YouTube-, Vimeo- vagy saját tárhelyű videót ágyaz be, saját lejátszóval, előnézeti képpel és átfedő ikonnal.

![A Videó elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-video.webp)

*A Videó elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Forrás** és a **Képarány** választó, valamint az összecsukott **Átfedés / ikon** szakasz látszik. A forrás alapértéke `youtube`.

A forrás lehetséges értékei: YouTube, Vimeo, Média (a médiatárból), Fájl URL és Dinamikus adatok.

## Forrás

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Forrás** | A videó forrása: `youtube`, `vimeo`, `media`, `file` (fájl URL) vagy `meta` (dinamikus adat). | `youtube` |
| Iframe címe | A videó iframe elérhetőségi címe. YouTube és Vimeo forrásnál. | Nincs |
| **Képarány** | A videó képaránya. | 16:9 |

## YouTube

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Videóazonosító vagy URL | A YouTube-videó azonosítója vagy teljes URL-je. | `5DGo0AYOJ7s` |
| Automatikus lejátszás | A videó az oldal betöltésekor elindul. Mobilon nem támogatott, és előnézeti képpel nem érhető el. | Ki |
| Vezérlők | A lejátszó vezérlőinek megjelenítése. | Be |
| Ismétlés | A videó ismétlődik. | Ki |
| Némítás | A videó hangtalan. | Ki |
| Kapcsolódó videók más csatornákról | Engedélyezi, hogy a YouTube más csatornák videóit is ajánlja. | Ki |
| Ne kövessen | A YouTube adatvédelmi módját használja (`youtube-nocookie.com`). | Ki |

## Vimeo

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Videóazonosító vagy URL | A Vimeo-videó azonosítója vagy URL-je. | Nincs |
| Adatvédelmi hash | Nem listázott Vimeo-videóknál kötelező. | Nincs |
| Automatikus lejátszás | Az oldal betöltésekor indul. Előnézeti képpel nem érhető el. | Ki |
| Ismétlés | A videó ismétlődik. | Ki |
| Némítás | A videó hangtalan. | Ki |
| Aláírás sor | A videó aláírásának megjelenítése. | Be |
| Cím | A videó címének megjelenítése. | Be |
| Felhasználói portré | A feltöltő portréjának megjelenítése. | Be |
| Ne kövessen | A Vimeo „Do Not Track” funkciója. | Ki |
| Szín | A lejátszó vezérlőinek egyéni színe. | Nincs |

## Előnézeti kép

YouTube és Vimeo forrásnál használható. A videó iframe csak az előnézeti képre kattintás után töltődik be (késleltetett betöltés).

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Előnézeti kép | A kép forrása: `default` (a szolgáltatótól) vagy `custom` (saját). | Nincs |
| Egyéni előnézeti kép | Saját kép feltöltése. Csak `custom` forrásnál. | Nincs |
| Képméret | A YouTube-előnézet mérete: `default` (120x90), `medium` (320x180), `high` (480x360), `standard` (640x480), `maximum` (1280x720). Csak YouTube alapértelmezett előnézeténél. | Nincs |

## Saját videó (média, fájl, dinamikus adat)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Média | Videó feltöltése vagy kiválasztása a médiatárból. Csak `media` forrásnál. | Nincs |
| Videófájl URL | Közvetlen link a videófájlra. Csak `file` forrásnál. | Nincs |
| Dinamikus adatok | Dinamikus adat a videó forrásaként. Csak `meta` forrásnál. | Nincs |
| Előtöltés | A videó előtöltése: `metadata`, `auto`, `none`. | Nincs |
| Automatikus lejátszás | Az oldal betöltésekor indul. | Ki |
| Ismétlés | A videó ismétlődik. | Ki |
| Némítás | A videó hangtalan. | Ki |
| Lejátszás helyben | Mobilon teljes képernyő helyett az oldalon belül játszik. | Ki |
| Vezérlők | A lejátszó vezérlői. | Be |
| Letöltés tiltása | Eltávolítja a letöltés gombot. Firefoxban nem támogatott. | Ki |
| Teljes képernyő tiltása | Eltávolítja a teljes képernyő gombot. Firefoxban nem támogatott. | Ki |
| Távoli lejátszás tiltása | Eltávolítja a távoli lejátszás gombot. Firefoxban nem támogatott. | Ki |
| Poszter | Poszterkép a videó SEO-jához. YouTube és Vimeo esetén előnézeti képként is szolgál. | Nincs |

## Átfedés és ikon

| Beállítás | Mit csinál |
| --- | --- |
| Átfedés | A videó fölé kerülő réteg háttere. |
| Ikon | Az átfedésen megjelenő ikon. |
| aria-label | Az ikon vagy átfedés elérhetőségi felirata. |
| Ikon tipográfiája | Az ikon mérete és színe. |
| Ikon belső margója | Az ikon körüli térköz. |
| Ikon háttérszíne | Az ikon háttere. |
| Ikon szegélye | Az ikon szegélye. |
| Ikon dobozárnyéka | Az ikon árnyéka. |

## Ismert probléma: Perfmatters

Ha a Perfmatters bővítmény „YouTube Preview Thumbnails” beállítása be van kapcsolva, a YouTube-videók fölött üres hely jelenhet meg. Ezt a következő CSS-sel javíthatod:

```css
.brxe-video .perfmatters-lazy-youtube {
  margin-top: -56.25%;
}
```