Tee kõik Embedded Content vastuseks Reframe.js'ile

Kõige keerulisem osa videote kaasamine on õige laius ja kõrgus. Need numbrid määrake kuvasuhe ja millal nad sinust maha jäävad saada üllatuslik videopleier.

See on kehtib kõigi sisseehitatud elementide kohta näiteks iframes ja sotsiaalmeedia vidinad. Ja need asjad võivad tundliku disainiga olla isegi keerukamad, sest nad on tavaliselt mitte reageerivad elemendid.

Aga koos Reframe.js, saate teha mis tahes element, mis vastab mis tahes kuvasuhtele.

See on ilmselt üks lihtsamaid, kuid kõige väärtuslikumaid JS-i pluginaid veebis. See oli tegelikult loonud Dollar Shave Club millel on üllatuslikult oma GitHubi leht.

Reframe on üks nende tasuta lisandmoodulitest ehitatud arendajatele, kes soovivad lihtsamat viisi reageeriva varjatud sisu käitlemine.

Ilmselge süüdlane on sisseehitatud video sellistest saitidest nagu YouTube ja Vimeo. See on kurikuulsalt neid elemente raske reageerida ilma CSS hacksita.

Reframe.js-iga, sa lihtsalt valige mis tahes element, mida soovite sihtida ja ümber kujundama kasutades reframe () funktsiooni.

Alustage lisades oma veebilehele Reframe.js plugin. Sa saad koopia allalaadimine GitHubist ja see on ainult 1KB minigeeritud.

Siis sa lihtsalt funktsiooni valija mis tahes elementide kohta, mida soovite ümber kujundada. Laadige lehekülg üles ja buum! Sa peaksid olema kõik seadistatud.

Oletame näiteks, et teie saidil on mõned videod. Sa saad lisage klass .video embed, ja kasutage seda valijana. Ümberehitus automaatselt lisab selle ümber klassi ja klassi tundliku stiili loomiseks.

Nii et teie JavaScripti kood näeks välja selline:

reframe (". video");

Päris lihtne?

See kood on suunatud kõigile klassi elementidele .video ja muudab need tundlikuks. Täiendavaid häkke pole, ei ole CSS-i. Lubatud, et CSS-meetodi kasutamisel pole midagi valesti käsitsi mähkimine kõik lisaklassiga varjatud videod.

Kujutage lihtsalt säästab selle täiendava sammu ja toob selle läbi JavaScripti. Et tutvuge demoga ja leidke mõned põhilised koodilõigud, külastage Reframe.js kodulehekülge. Sa saad laadige koodi koopia otse GitHub repost.