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.
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).20.11.2017, Matej LednárCategory: CSSCSS,iframe,youtube,video,responsive design,width,height,calc(),web designNo part of this article may be reproduced without mention of the author and URL to this website.For more information, see the About section.
