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.
