כמעט כל אתר עסקי מציג היום סרטון: הדרכה, המלצה של לקוח או סרטון תדמית. הבעיה היא שקוד ההטמעה שיוטיוב נותן מגיע ברוחב 560 פיקסלים קבוע, ובטלפון הוא נחתך או משאיר פסים שחורים. בכלי קוד הטמעה רספונסיבי ליוטיוב ול-Vimeo מדביקים קישור לסרטון ומקבלים קוד נקי שמתאים את עצמו לכל מסך, מוכן להדבקה באלמנטור או בוורדפרס.
למה צריך הטמעה רספונסיבית
רוב הגולשים באתרים בישראל מגיעים מהטלפון. נגן שלא שומר על היחס שלו נראה מרוח, וחלק מהתמונה נעלם. הקוד שהכלי יוצר עוטף את הנגן במסגרת עם יחס קבוע (aspect-ratio), כך שבכל רוחב הסרטון נשאר מלא ובגודל הנכון. לדפדפנים ישנים יש גיבוי מובנה.
סרטוני Shorts צולמו לאורך ביחס 9:16. הכלי מזהה קישור של shorts, בוחר את היחס הזה לבד ומגביל את הרוחב ל-360 פיקסלים, כדי שבמחשב הסרטון לא יתפרס לגובה של שני מסכים.
הפעלה אוטומטית, פרטיות ומהירות
הפעלה אוטומטית עובדת רק כשהסרטון מושתק. כרום, ספארי ופיירפוקס חוסמים סרטון שמתחיל לנגן עם קול בלי לחיצה של הגולש, ולכן הכלי מוסיף השתקה בכל פעם שבוחרים הפעלה אוטומטית.
מצב פרטיות מוגבר טוען את הנגן מהכתובת youtube-nocookie.com. יוטיוב לא שומר מידע על הגולש לצורך התאמה אישית עד שהוא לוחץ Play, אבל אחרי הלחיצה הוא עשוי לשמור מידע במכשיר. זה מצמצם מעקב, ועדיין כדאי לציין את יוטיוב במדיניות הפרטיות של האתר.
טעינה בלחיצה (Facade) היא האפשרות שהכי משפיעה על המהירות. נגן יוטיוב רגיל מוריד מאות קילובייטים עוד לפני שמישהו צפה. במקום זה העמוד מציג את התמונה של הסרטון וכפתור Play, והנגן נטען רק בלחיצה. זה משפר את הציון ב-PageSpeed, במיוחד בעמוד עם כמה סרטונים.
איך מטמיעים סרטון באלמנטור, שלב אחר שלב
- מעתיקים את הקישור לסרטון מיוטיוב או מ-Vimeo. כל צורה עובדת: watch, youtu.be, Shorts, פלייליסט, קישור עם זמן התחלה, וגם קוד embed קיים.
- מדביקים אותו בכלי וכותבים כותרת קצרה לנגישות, למשל ״סרטון הדרכה: איך קובעים תור״.
- בוחרים אפשרויות: זמן התחלה, השתקה, לולאה, כתוביות בעברית או טעינה בלחיצה.
- מעתיקים את הקוד מהלשונית ״HTML רספונסיבי״ ומדביקים בווידג׳ט HTML באלמנטור, או בבלוק ״HTML מותאם״ בוורדפרס.
- מי שמעדיף את ווידג׳ט Video של אלמנטור יקבל בלשונית נפרדת רשימה של ההגדרות שצריך לסמן בו.
כדאי להעתיק גם את הסימון מהלשונית ״JSON-LD״ ולמלא בו שם, תיאור, תאריך העלאה ותמונה. הסימון (VideoObject) עוזר לגוגל להבין שיש בעמוד סרטון ועל מה הוא. גם הכותרת לנגישות חשובה: קוראי מסך מקריאים אותה לפני הנגן, ובלעדיה גולש עיוור שומע רק ״מסגרת״ בלי לדעת מה יש בה.
מה חשוב לדעת
- הפרמטר rel=0 כבר לא מעלים את ההצעות בסוף הסרטון. מאז 2018 הוא רק מגביל אותן לסרטונים מאותו ערוץ.
- modestbranding בוטל ב-2023 ולא משפיע יותר על הנגן, ולכן הכלי לא מוסיף אותו.
- בטעינה בלחיצה, באייפון ייתכן שיידרש טאפ נוסף כדי שהסרטון יתחיל.
- סרטון Vimeo לא רשום עובד רק עם הקוד הסודי שבסוף הקישור, ורק אם בעל הסרטון אישר הטמעה באתר שלכם.
- אם הבעלים חסמו הטמעה של סרטון ביוטיוב, הנגן יציג שגיאה. שום קוד לא עוקף את זה.
עוד כלים שיעזרו
- מחולל Schema, לנתונים מובנים נוספים בעמוד שבו הסרטון מופיע. את הסימון של הסרטון עצמו (VideoObject) מקבלים בכלי ההטמעה.
- וידאו לאנכי, כדי להפוך סרטון רוחבי ל-9:16 לפני שמעלים אותו כ-Short או לריילס.
- תצוגה מקדימה לגוגל, כדי לבדוק איך הכותרת והתיאור של העמוד ייראו בתוצאות החיפוש ובשיתוף.
הכלים מהמדריך