Padarykite visus įterptąjį turinį reaguojančiu su „Reframe.js“
Labiausiai sudėtinga dalis įterpti vaizdo įrašus gauna teisingą plotį ir aukštį. Šie numeriai apibrėžti vaizdo santykį ir kada jie išeis gauti netikrą vaizdo grotuvą.
Tai yra tinka visiems įterptiems elementams pvz., „iframes“ ir socialinės žiniasklaidos valdikliai. Ir šie dalykai gali būti netgi sudėtingesni, jei jie paprastai yra neatsakantys elementai.
Bet su Reframe.js, tu gali padaryti bet koks elementas, reaguojantis į bet kokį vaizdo santykį.
Tai galbūt vienas iš paprasčiausių, bet vertingiausių JS įskiepių internete. Tai buvo iš tikrųjų sukūrė „Dollar Shave Club“ kuris stebėtinai turi savo „GitHub“ puslapį.
Reframe yra vienas iš jų nemokamų įskiepių pastatytas kūrėjams, kurie nori paprastesnio būdo valdyti reaguojamąjį įterptąjį turinį.
Akivaizdus kaltininkas yra įterptas vaizdo įrašas iš tokių svetainių kaip „YouTube“ ir „Vimeo“. Tai žinoma sunku šiuos elementus reaguoti be CSS.
Su Reframe.js, jūs tiesiog pasirinkite bet koks elementas, kurį norite nukreipti, ir perrašykite jį naudojant reframe () funkcija.
Pradėkite pridėdami „Reframe.js“ papildinį į savo tinklalapį. Tu gali atsisiųskite kopiją iš GitHub, ir tai tik 1KB minifikuota.
Tada jūs tiesiog perduoti funkciją selektoriui bet kokiems elementams, kuriuos norite perrašyti. Įkelkite puslapį ir bumas! Jūs turite būti visi.
Pvz., Tarkime, kad jūsų svetainėje yra keli vaizdo įrašai. Tu gali pridėti klasę .vaizdo įrašas į įdėtą, ir naudokite jį kaip selektorių. Reframe automatiškai prideda „div“ ir „class“ sukurti reaguojantį stilių.
Taigi jūsų „JavaScript“ kodas atrodytų taip:
reframe („. video“);
Gana paprasta?
Šis kodas skirtas visiems elementams su klasė .vaizdo įrašas ir daro juos reaguojančius. Jokių papildomų hacks, be papildomų CSS. Suteikta, kad naudojant CSS metodą nieko blogo, bet jums reikės rankiniu būdu suvynioti visi įterpti vaizdo įrašai su papildoma klase.
Suprojektuokite tiesiog taupo jums šį papildomą žingsnį ir sujungia jį su „JavaScript“. Į patikrinkite demonstraciją ir rasti keletą pagrindinių kodo fragmentų, apsilankykite „Reframe.js“ pagrindiniame puslapyje. Tu gali atsisiųskite kodo kopiją tiesiai iš „GitHub“ repo.
