הגדרת רקע וידאו מתנגן במכשיר נייד בעזרת אלמנטור או רק עם קוד

שתפו:

Share on facebook
Share on google
Share on twitter
Share on linkedin

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

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

התשובות היו:

  • אי אפשר לנגן וידאו במובייל
  • קומבינות עם תוספים
  • ועוד ….

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

איך זה אפשרי?

קודם שיהיה ברור: אנדרואיד ו- IOS תומכים בניגון אוטומטי של וידאו HTML5 כבר שנה (סגירת מעגל!).
אז למעשה אלמנטור כבר תומכת בוידאו רקע אבל חסרה עזרה קטנה.
במצב הנוכחי היום אם תלכו להגדרות section למעשה תראו אפשרות להכניס קישור יוטיוב, אבל מאחורי הקלעים יש תמיכה לוידאו HTML5 מקומי והמאפיינים שיוצמדו יהיו: autoplay loop muted (רמז: לא הדגשתי סתם).

אז מה עושים?

החבר'ה באלמנטור מסתירים את הוידאו במובייל, ובעזרת שורת CSS קטנה נפתור את זה.

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

 

 

לאחר מכן תחת לשונית "מתקדם" תקבעו מזהה ל-section שהווידאו נמצא בתוכו.

 

לאחר מכן לכו לעיצוב > התאמה אישית > בתפריט בצד ימין בחרו CSS מותאם והדביקו את הקוד הבא:

 

למכשירי Apple: יש להדביק את הקוד הבא בקובץ functions.php שנמצא בספרייה הראשית של התבנית.

הערות:
1. יכול להיות שפספסתי קצת טירגוטים ב- CSS או ב- JS, אל תהיו קטנוניים תתאימו למצב שמתאים לכם.
2. באלמנטור הוידאו במובייל לא רספונסיבי, יש inline css שקובע לו רוחב, נראה כמו הרוחב של ה- section.
אולי אפשרי לתקן את זה זה בעזרת CSS לא בדקתי.

בהצלחה!

יהודה חסין

יהודה חסין

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

יהודה חסין

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

מאמרים אחרונים

קטגוריות

Post SMTP Mailer / Email Log
Post SMTP Mailer / Email Log
קראו את הפוסט הקודם:
Google website display on computer screen
הוספת גוגל אנליטיקס לאתר הוורדפרס

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

סגור