×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

Ako vytvoriť responzívne video cez CSS

Pri vytváraní responzívneho web designu môže programátor naraziť na problém ako vytvoriť responzívne video, napríklad ak sa používa <iframe> z Youtube. Video v elemente <iframe> sa totiž nespráva rovnako ako obrázok a nastavením výšky na 100% tak nefunguje.
Príklad: Príklad videa z Youtube.
1
2
<iframe class="video" src="https://www.youtube.com/embed/uGAl6x_ZIH4"
frameborder="0" allowfullscreen></iframe>
Príklad: Ukážka štandardného zápisu, ktorý pri videu nefunguje.
1
2
3
4
.video {
width: 100%;
height : 100%;
}}
Príklad: Fungujúci responzívny zápis.
1
2
3
4
.video {
width: 100%;
height : calc(100vw/1.778);
}}

Záver

Pre automatickú zmenu výšky a šírky bola použitá funkcia calc() a číslo 1.778, ktoré reprezentuje pomer strán pre video v rozlíšení 1920 x 1080 (1920/1080).


CSS,iframe,youtube,video,responsive design,width,height,calc(),web design
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších