הפוך את כל תוכן Embedded מגיבים עם

החלק הכי מסובך הטמעת סרטונים הוא מקבל את רוחב וגובה הנכון. מספרים אלה להגדיר את יחס הממדים וכשהם יסתלקו לקבל נגן וידאו.

זה נכון עבור כל המרכיבים מוטבע כגון iframes ווידג'טים מדיה חברתית. ואת הדברים האלה יכולים להיות אפילו יותר מסובך עם עיצוב תגובה כי הם בדרך כלל לא רכיבי תגובה.

אבל עם Reframe.js, אתה יכול להכין כל רכיב תגובה עבור כל יחס הממדים.

זה אולי אחד התוספים הפשוטים ביותר JS עדיין הכי יקר באינטרנט. זה היה ממש נוצר על ידי דולר Shave Club אשר מפתיע יש דף GitHub שלה.

Reframe הוא אחד plugins בחינם שלהם שנבנה עבור מפתחים שרוצים דרך פשוטה יותר טיפול תוכן מוטבע תגובה.

האשם הברור מוטבע וידאו מאתרים כגון YouTube ו- Vimeo. זה ידוע לשמצה קשה להפוך את האלמנטים האלה למגיבים ללא פריצות CSS.

עם Reframe.js, אתה פשוט בחר איזה רכיב אתה רוצה למקד ו לשפץ אותו מחדש משתמש ב reframe () פונקציה.

התחל על ידי הוספת התוסף Reframe.js לדף האינטרנט שלך. אתה יכול הורד עותק מ GitHub, וזה רק 1KB מוקטנת.

ללא שם: לאחר מכן, אתה פשוט להעביר את הפונקציה בורר עבור כל האלמנטים שאתה רוצה reframe. טען את הדף ו בום! אתה צריך להיות מוכן.

לדוגמה, נניח שיש לך כמה סרטונים מוטבעים באתר שלך. אתה יכול הוסף את הכיתה .וידאו אל הטבעת, ולהשתמש בו בתור בורר. Reframe מוסיף באופן אוטומטי div ומחלקה סביבו כדי ליצור סגנון תגובה.

אז שלך קוד ייראה כך:

reframe ('וידאו');

זכות פשוטה למדי?

קוד זה ממקד לכל האלמנטים עם הכיתה .וידאו ו גורם להם להגיב. אין פריצות נוספות, ללא CSS נוסף. אמנם אין שום דבר רע עם שימוש בשיטת CSS אבל תצטרך לעטוף ידנית כל קטעי וידאו מוטבע עם בכיתה נוספת.

Reframe רק חוסך לך את הצעד הנוסף ומביא את כל זה באמצעות JavaScript. ל לבדוק הדגמה ו למצוא כמה קטעי קוד בסיסיים, בקר בדף הבית של Reframe.js. אתה יכול הורד עותק של הקוד ישר מן ריפו GitHub.