Reagovat s veškerým vloženým obsahem pomocí funkce Reframe.js

Nejtěžší část vkládání videí je správná šířka a výška. Tato čísla definovat poměr stran a když budou pryč dostat nevychovaný video přehrávač.

Tohle je platí pro všechny vložené prvky jako jsou iframe a widgety sociálních médií. A tyto věci mohou být ještě citlivější s citlivým designem, protože jsou obvykle necitlivé prvky.

Ale s Reframe.js, muzes udelat jakýkoliv prvek reagující na jakýkoli poměr stran.

Toto je snad jeden z nejjednodušších, ale nejcennějších pluginů JS na webu. Bylo to vlastně vytvořil (a) Dollar Shave Club který má překvapivě svou vlastní stránku GitHub.

Reframe je jeden z jejich bezplatných pluginů postaven pro vývojáře, kteří chtějí jednodušší způsob zacházení s citlivým vloženým obsahem.

Zřejmým viníkem je vložené video ze stránek jako YouTube a Vimeo. Je to notoricky obtížné, aby tyto prvky reagovaly bez CSS hacků.

S Reframe.js, prostě vybrat jakýkoliv prvek, na který chcete cílit reframe za použití reframe () funkce.

Začněte přidáním pluginu Reframe.js na svou webovou stránku. Můžeš stáhnout kopii z GitHubu a je to jen 1KB minified.

Pak už jen projít voličem pro všechny prvky, které chcete změnit. Načtěte stránku a boom! Měli byste být všichni nastaveni.

Řekněme například, že máte na svých stránkách vloženo několik videí. Můžeš přidejte třídu .video na embed, a pouľijte jej jako volič. Reframe automaticky přidává div a třídu kolem něj vytvořit citlivý styl.

Takže vaše JavaScript kód vypadalo by to takto:

reframe ('. video');

Docela jednoduché?

Tento kód se zaměřuje na všechny prvky třídy .video a dělá je citlivý. Žádné další hacky, žádné další CSS. Je pravda, že pomocí metody CSS není nic špatného, ​​ale budete muset ručně zabalit všechna vložená videa s extra třídou.

Reframe just vám ušetří další krok a přináší vše pomocí JavaScriptu. Na podívejte se na demo a najít nějaké základní úryvky kódu, navštivte domovskou stránku Reframe.js. Můžeš stáhněte si kopii kódu přímo z repo GitHub.