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!

Ai ceva de spus?

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare /  Schimbă )

Fotografie Google

Comentezi folosind contul tău Google. Dezautentificare /  Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare /  Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare /  Schimbă )

Conectare la %s

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.