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

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

התשובות היו:

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

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

איך זה אפשרי ?

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

אז מה עושים ?

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

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

 

 

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

 

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

body:not(.elementor-editor-active) div.elementor-background-video-container.elementor-hidden-phone {
   display: block !important;
}

 

למכשירי apple צריכים עוד תוספת javascript קטנה שאפשר לשים בפוטר

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

בהצלחה !

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