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

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

מדריכים חדשים

שרה קריב

שרה קריב

שרה קריב

שרה קריב

שרה קריב

שרה קריב

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

עדכון 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 שנמצא בספרייה הראשית של התבנית.

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

				
					function add_autoplay_fix_ios() {
	?>
	<script type="text/javascript">
		var myvideos = document.querySelectorAll('.myvideo video');
		if ( navigator.userAgent.match( /(iPod|iPhone|iPad)/ ) ) {
			for (let index = 0; index < myvideos.length; index++) {
				myvideos[index].setAttribute('playsinline', '');
			}
		}
	</script>
	
	add_action( 'wp_footer', 'add_autoplay_fix_ios' );
	
	<?php
});

הערות

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

בהצלחה!

יהודה חסין

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

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