Bakos Szabolcs UI/UX Designer portfóliója

Reszponzív Youtube videó

Dinamikusan méretet váltó beágyazott Youtube videó megoldás, reszponzív weblapokhoz. HTML és CSS kóddal.

Profi céges weblap olcsón?
A profi webdesigner lop
Reszponzív Youtube videó
Szerző: Bakos Szabolcs
Ha van szabadidőm, akkor általában mindig a webes újdonságokat tesztelem. Sajnos ez nincs túl gyakran, viszont a napokban az egyik ügyfél weblapjánál - amit reszponzív megoldással készítettem felmerült egy új igény.

Az ügyfél Youtube videókat kért az egyik oldalára, amivel nem is volt semmi gond. A probléma ott kezdődött, hogy meglepődve vettem észre a beágyazott Youtube videók nem reszponzívak, tehát különböző méretekben, pl. mobilon rossz volt a méretük.

Gyorsan rákerestem a neten, ahol a külföldi oldalakon több fajta megoldás is létezik. Sajnos ezek nagy része nem működik megfelelően. Van amelyik túl bonyolult volt, van amelyik csak bizonyos böngészőkön működik. Én a legegyszerűbb működő megoldást írom itt le, amit kipróbáltam és használok:

A recept rendkívül egyszerű, a HTML kódban a Youtube beágyazás köré dobunk egy div konténert "youtube-container" néven:

HTML

<div class="youtube-container">
<iframe src="http://www.youtube.com/embed/v1uyQZNg2vE?showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>
</div>

Ha ezzel megvagyunk szépen bevágjuk a CSS fájlunkba az alábbi CSS sorokat:

CSS

.youtube-container {
border: 1px solid #CCCCCC;
height: 0;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}

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

... és készen is vagyunk. Most már reszponzívban pörögnek a Youtube videók. Remélem hasznosnak találtad ezt a segédletet.

Dolgozzunk együtt!

Amennyiben konkrét webdesign projekttel szeretnél megkeresni, vagy szeretnél velem együttműködni, kérlek vedd fel velem a kapcsolatot. Dolgozzunk együtt egy sikeres projekten!