Prilagodljiv video – Responsive Video (RWD)

Prilagodljiv-video-Responsive-Video-RWD

Prilagodljiv video v odzivnem spletnem designu (RWD) je povsem druga pesem, kot prilagodljive slike. Namreč video se ob uporabi enakih CSS značk (max-width:100% in height: auto) ne prilagaja pravilno. Zaradi tega je potrebno uporabiti drugačne pristope.

Ena takšnih rešitev je enostavna uporaba CSS rešitve, ki pa žal zahteva dodatno DIV polje. Rešitev je zelo elegantna, saj uporabi na novem polju ustrezno razmerje stranic (56.25%) video posnetka v katerega potem prilagodi video.

.video-box {
padding-top: 56.25%;
position: relative;
}

iframe, embed, object {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

Zgornja rešitev je primerna za nove projekte ali projekte v manjšem obsegu, ker zahtevajo dodatno DIV polje. V primeru, kjer želimo doseči prilagodljivost posnetkov na že obstoječih objavah pa je najbolje uporabiti sistemske rešitve. Ena takšnih rešitev je tudi FITVIDS.JS – http://fitvidsjs.com/.

Komentiraj


*