Reszponzív Youtube videó


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

Archive
Reszponzív Youtube videó
Archive
Author: 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ást is találtam. 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é dobsz 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 ezt megcsináltad, akkor vágd be a CSS fájlodba az alábbi 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%;
}

Ezzel gyakorlatilag meg is vagy ezzel a kis trükkel és mostantól reszponzívak lesznek a youtube videóid.

Véleményed van? Szólj hozzá!


Jelenleg még nem szóltak hozzá ehhez a bejegyzéshez.





Bakos Szabolcs, UI/UX Designer

A bejegyzés szerzője

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



További bejegyzések


Dolgozzunk együtt!

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.

Elolvastam és megértettem az Adatvédelmi és szerzői jogi nyilatkozatot
UX Design Budapest
Kapcsolat Szabolcs Bakos - Szabadúszó UI/UX designer (Facebook) Szabolcs Bakos - Szabadúszó UI/UX designer (Twitter) Szabolcs Bakos - Szabadúszó UI/UX designer (Linkedin)
Webdesign Budapest