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

כדי להמחיש, זה מה שקרה:

שים לב שהסרטון אינו לוקח רוחב מלא של מיכל התוכן?

שים לב שהסרטון אינו משתנה כאשר אתה משנה את גודל הדפדפן והוא יצא ממכל התוכן ושובר את העיצוב?

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

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

1. התקן ולהפעיל את FitVids עבור תוסף WordPress.

2. עבור אל "מראה -> FitVids".

3. אם אתה בטוח לחלוטין כי התסריט jQuery (של גירסה 1.6 ומעלה) כבר נכלל הנושא שלך, להשאיר את השדה "הוסף jQuery" ריק. אם לא, סמן את התיבה לצד "הוסף jQuery".

4. שדה "jQuery בורר" הוא קצת מסובך כי זה יכול להיות שונה עבור כל אתר. עבור רוב המקרים, אתה יכול פשוט להזין את המילה " גוף " (ללא הצעת מחיר) בשדה קלט וזה צריך לעבוד. עם זאת, אם ברצונך למקד למיקוד מסוים באמצעות סרטון, תוכל למקם את המזהה / מחלקה של הגורם המכיל בשדה זה, לדוגמה: " #video-container ", " #content ", " .entry-content " וכו '

הערה : "#" ו - "." מול הטקסט מייצגות את "id" ו "בכיתה" ב- CSS בהתאמה.

5. עכשיו, לבדוק את ההודעה עם וידאו מוטבע. אתה צריך לראות משהו כזה:

הסרטון עכשיו לוקח רוחב מלא של מיכל התוכן

זה אוטומטי בקנה מידה כמו לשנות את גודל הדפדפן.

סיכום

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