Faceți tot conținutul încorporat să răspundă cu Reframe.js

Cea mai complicată parte încorporarea videoclipurilor este obtinerea latimei si inaltimii corecte. Numerele astea definiți raportul de aspect și când sunt plecați, veți fi pentru a obține un player video de calitate.

Aceasta este adevărat pentru toate elementele încorporate cum ar fi cadrele iframe și widget-urile sociale. Și aceste lucruri pot fi chiar mai dificile cu designul receptiv, deoarece acestea sunt de obicei nu sunt elemente receptive.

Dar cu Reframe.js, puteți face orice element care răspunde pentru orice aspect de aspect.

Acesta este probabil unul dintre cele mai simple plug-in-uri JS de pe web. A fost de fapt create de Dollar Shave Club care surprinzător are propria sa pagină GitHub.

Reframe este unul dintre pluginurile lor gratuite construit pentru dezvoltatorii care doresc o modalitate mai simplă de manipularea conținutului încorporat receptiv.

Evidentul vinovat este video încorporat de pe site-uri precum YouTube și Vimeo. Este notoriu dificil de a face aceste elemente receptive fără hack-uri CSS.

Cu Reframe.js, tu doar Selectați indiferent de elementul pe care doriți să îl vizați și reframează-l folosind recadreze () funcţie.

Începeți prin adăugarea pluginului Reframe.js la pagina dvs. Web. Poti descărcați o copie de la GitHub, și este doar 1KB minimificat.

Apoi, tu doar treci funcția selector pentru toate elementele pe care doriți să le reframați. Încărcați pagina și boom-ul! Ar trebui să fiți pregătiți.

De exemplu, să presupunem că aveți câteva videoclipuri încorporate pe site-ul dvs. Poti adăugați clasa .video la embed, și folosiți-l ca selector. recadreze adaugă automat o div și o clasă în jurul ei pentru a crea stilul receptiv.

Deci, dvs. Cod JavaScript ar arata astfel:

recadreze ( 'video.');

Destul de simplu?

Acest cod vizează toate elementele din clasă .video și le face să răspundă. Nu există hack-uri suplimentare, fără CSS suplimentar. Acordat nu este nimic în neregulă cu utilizarea metodei CSS, dar va trebui să împachetați manual toate videoclipurile încorporate cu clasa suplimentară.

Reframează doar vă salvează acest pas suplimentar și o aduce cu totul prin intermediul JavaScript. La verificați o demonstrație și găsiți câteva fragmente de cod de bază, vizitați pagina de pornire a Reframe.js. Poti descărcați o copie a codului direct de la repo GitHub.