Štítek: 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.