Front-end, Segédletek

Reszponzív Youtube videó


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

Reszponzív Youtube videó
Front-end
Segédletek
Author: Szabolcs Bakos

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="https://www.youtube.com/watch?v=K4wEI5zhHB0?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.


Bakos Szabolcs, UI/UX Designer

Kövess Facebookon a friss bejegyzésekért

Bakos Szabolcsnak hívnak, szabadúszó UI/UX Designer vagyok, több mint 17 év webdesign tapasztalattal a hátam mögött, cégek és vállalatok számára tervezek weblapokat.



Vedd fel velem a kapcsolatot!

Amennyiben kérdésed van, legyen az egyszerű információkérés, együttműködés, vagy üzleti megkeresés, örömmel állok a rendelkezésedre.

UI/UX Design
Facebook Twitter Google+ Linkedin
Web Design