הירשמו לקבלת עדכונים

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

Text Effect

אפקטים מגניבים לפונטים ב-CSS בלבד

במדריך הבא אשתף אתכם בכמה אפקטים מגניבים שאפשר לעשות לפונטים באמצעות CSS בלבד, יאלה מתחילים! אפקט גרדיאנט גרדיאנט selector { color: mix(#fff, #e91e63, 85%); font-size:

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

Background Video
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

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

התשובות היו:

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

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

איך זה אפשרי?

קודם שיהיה ברור: אנדרואיד ו- 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: יש להדביק את הקוד הבא בקובץ functions.php שנמצא בספרייה הראשית של התבנית.

שימו לב! יש להוסיף בסוף הקוד את השורה הבאה:

<?php
});

function add_autoplay_fix_ios() {
	?>
		

לאחר מכן הדביקו את הקוד הבא:

add_action( 'wp_footer', 'add_autoplay_fix_ios' );

הערות

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

בהצלחה!

מפתח וורדפרס עם ניסיון של חמש שנים בפיתוח תוספים ותבניות לוורדפרס. היה לי העונג לעבוד מפרוייקטים קטנים עד לפרוייקטים גדולים לחברות הגדולות במשק. . מפתח התוספים Postman SMTP ו-Metrics Query.

מדריכים באותו נושא:

בואו נדבר על זה

0 0 דרג
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
תגובות בגוף המאמר
צפה בכל התגובות
0
נשמח לשמוע מה אתה חושב, הגב כאן...x
()
x
דילוג לתוכן