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.
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í.
Je to suprový článek, díky, zkusím to.