Návod jak udělat responzivní Youtube video

Zakoupil jsem jednu krásnou responsive šablonu pro redakční systém, nicméně po nahrání videa roztaženého na maximální šířku se při zmenšení rozhodil design a video zůstalo neustále roztažené.
Jak odstranit tuto vadu? Zcela jednoduše.

Dané videa dejte do DIVu např. takto (použiji iframe)

<div class="video">
<iframe src="//www.youtube.com/embed/rIFB4UKbIs8?rel=0" frameborder="0" width="1200" height="675"></iframe>
</div>

Následně je potřeba daný DIV nastylovat

.video {position: relative; padding-bottom: 55%; padding-top: 30px; height: 0; overflow: hidden;}
.video iframe,
.video object,
.video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Nastylované je to jak pro použití iframe, tak starého dnes již méně používaného object.

2 odpovědi na “Návod jak udělat responzivní Youtube video”

  1. Dobré je že tohle můžete použít i pro slideshare.
    Popsal jsem na na svém webu.
    http://mareklecian.cz/responzivni-youtube-videa/
    Styl je dobrý ale doporučuji ještě class video přejmenovat na něco přesnějšího aby nemohlo dojít záměně. Také je vhodné takovou úpravu vložit do hlavního css pro snadnější opakované použití.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *