הפעלת סרטון במעבר עכבר

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

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

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

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

קוד HTML

<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.