Poți învăța din “Primul sărut”

Am văzut că pe YouTube a apărut un videoclip atât de viral încât a adunat mai bine de 10 milioane de vizualizări în 24 de ore.
Mi-am zis că merge să scrii câteceva despre un asemenea clip. Când am vrut să adaug acest mic filmuleț într-un articol mi-am dat seama că acesta este primul clip pe care îl public folosind aceasta temă de WordPres și că nu va arăta bine deloc.
A trebuit să caut o soluție rapidă, fiabilă și ușor de implementat pentru a face să nu strice caracterul responsive al temei fără a instala module sau alte rahaturi.
Soluția e simplă:
În CSS am creat un div cu clasa video căruia i-am spus să se întindă pe toată lățimea articolului și să aibă înălțimea de 56.25% din lățimea sa, pentru a păstra raportul de 9/16, pe care-l au mai toate filmulețele HD.

div.video {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}

Apoi am setat ca orice iframe inserat în el să ocupe toată înălțimea și toată lățimea sa.

div.video iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Tot ce-mi rămâne de făcut este să întroduc fiecare iframe într-un div cu clasa video:


și el se va comporta așa cum vreau eu!

Leave a Reply