Zabezpečte, aby všetok vložený obsah reagoval na Reframe.js

Najťažšia časť o vkladanie videí je správna šírka a výška. Tieto čísla definujte pomer strán a keď sú preč, vy budete získajte nevhodný prehrávač videa.

Toto je platí pre všetky vložené prvky ako sú napríklad rámce iframe a miniaplikácie sociálnych médií. A tieto veci môžu byť ešte zložitejšie a reagujúce na dizajn, pretože sú zvyčajne nereagujúce prvky.

Ale s Reframe.js, môžeš urobiť akýkoľvek prvok reagujúci na akýkoľvek pomer strán.

To je možno jeden z najjednoduchších a najcennejších pluginov JS na webe. Bolo to skutočne vytvorený klubom Dollar Shave čo má prekvapivo vlastnú stránku GitHub.

Reframe je jeden z ich bezplatných doplnkov postavený pre vývojárov, ktorí chcú jednoduchší spôsob spracovanie odpovedajúceho vloženého obsahu.

Zrejmé vinník je vložené video z miest, ako sú YouTube a Vimeo. Je to známe je ťažké tieto prvky reagovať bez CSS hacks.

S Reframe.js, práve ste vybrať akýkoľvek element, na ktorý chcete zacieliť, a reframe to pomocou Reframe () funkcie.

Začnite pridaním doplnku Reframe.js na svoju webovú stránku. Môžeš stiahnuť kópiu od GitHub, a je to iba 1KB minimalizované.

Potom ste práve prejdite funkciou voliča pre akékoľvek prvky, ktoré chcete zmeniť. Vložte stránku a boom! Mali by ste byť všetci nastavení.

Povedzme napríklad, že máte na vašom webe vložené niekoľko videí. Môžeš pridajte triedu .video k vloženiu, a použite ho ako volič. preformulovať automaticky pridá div a triedu okolo neho na vytvorenie citlivého štýlu.

Takže tvoje Kód JavaScript by vyzeralo takto:

preformulovať (Video.);

Docela jednoduché právo?

Tento kód je zameraný na všetky prvky triedy .video a robí ich reagovať. Žiadne ďalšie hacks, žiadne ďalšie CSS. Udelili sme, že nie je nič zlého s použitím metódy CSS, ale budete musieť ručne zabaliť všetky vložené videá s extra triedy.

Reframe práve vám ušetrí ďalší krok a prináša to cez JavaScript. na pozrite si demo a nájdete niekoľko základných úryvkov kódu, navštívte domovskú stránku Reframe.js. Môžeš stiahnuť kópiu kódu priamo z repo GitHub.