scroll

הפעלה אוטומטית של סרטונים ברחף

איך תוסיפו סרטון וידאו שבמעבר עכבר מעליו הוא מתחיל לנגן (ללא שמע) ובהסרת העכבר הוידאו נעצר

איך זה עובד?

מקור התוכן בהדרכה זו הוא מאתר wicky design של Mark Crowell ו Barbara DiLisio שמייצרים הדרכות מעולות על תוספות מיוחדות באלמנטור ובקוד לחצו לקישור ישיר להדרכה

The source of the content in this guide is the wicky design by Mark Crowell and Barbara DiLisio who produce excellent tutorials on special plugins in Elementor and Code Click for a direct link to the tutorial

הפעלה אוטומטית של וידאו במעבר עכבר - קוד סטטי

הוסיפו ווידג'ט HTML באלמנטור בכל מקום שתרצו את הסרטון, והדביקו את הקוד המצורף. (כמובן תוכלו לשחק בגודל הסרטון ע"י שינוי גודל העמודה).

רק שימו לב! לשנות בשורה 1 את מקור התמונה המצורפת לקישור של התמונה שלכם (תמונה ראשית שתופיע לפני הפעלת הסרטון) וכמו"כ בשורה 2 את הקישור לסרטון.

אם יש לכם ידע בסיסי בCSS תוכלו להוסיף style בתוך הקוד ולעצב בחופשיות (ראו קוד style מצורף).

קוד HTML

בקוד הזה הוספתי (CSS) שיצור פינות מעוגלות לסרטון, תוכלו להוסיף כל סטייל שתרצו.

				
					<video class="rounded-video" muted onmouseover="this.play()" onmouseout="this.pause(); this.currentTime=0;" poster="הכניסו קישור לתמונה ראשית כאן">
<source src="הכניסו קישור לסרטון כאן" type="video/mp4">
</video>

/*תוספת סטייל לסרטון*/
<style>
    .rounded-video {
        border-radius: 20px;
        overflow: hidden;
    }
</style>
				
			

הוראות לסרטון ותמונה ראשית

ההמלצה! שגודל הסרטון לא יעלה על 1MB והפריסה על 640X360. כמובן שאפשרי יותר אבל יכולים להיות בעיות טעינה עד שהסרטון יפעל.

כמו"כ לגבי התמונה הפריסה כמו של הסרטון 640X360 והגודל כמה שיותר קטן (בדוגמא המצורפת התמונה בגדול 70KB.

לינקים קשורים למדריך

שיתוף המדריך

1 1 vote
דירוג מאמר
Subscribe
Notify of
guest
0 הערות
Inline Feedbacks
View all comments

עוד מדריכים קשורים

Farjana Rashid

מדריך מהיר וקצר, איך להפוך את צבע הכותרת שלך לצבע הדרגתי באלמנטור. רק קוד CSS והכותרת שלך משודרגת

Farjana Rashid

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

SAVVY

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

תודה שאישרת את הצעת המחיר!

לא צויין כתובת מייל

סך תשלום ראשון (מקדמה) 30% מסכום העסקה הינו:

בפרוייקטים של עיצוב גרפי או/ו פרוייקטים שלא עולים מעל לסכום של 2000₪, התשלום לא יתחלק לפעימות אלא התשלום יושלם בפעימה ראשונה או יתחלק לשתי פעימות על פי הסיכום בטלפון או בהודעות

העברה בנקאית

בנק – ONE ZERO (18)
סניף – ראשי (001)
חשבון – 202003116
ע"ש – אליהו כהן

תשלום באפליקציות

bit/PayBox
במספר טלפון 0503528688