fbpx

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

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

500x500 Birthday 2022 Croco (1)

40% הנחה לכל חבילות קרוקובלוק

קופון הנחה: crocoturns4
סיום המבצע: 29/5/22

Cart Count

שורטקוד – הצגת כמות מוצרים בסל

קוד PHP המאפשר להציג איפה שתרצו את מספר הפריטים שיש כרגע בסל הקניות. יש להעתיק את הקוד לקובץ ה- functions.php שבתבנית הבת שלכם, על מנת

Text Scroll

CSS – תיבת טקסט עם גלילה

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

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

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

				
					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.

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

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

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