וידאו באתר: איך מטמיעים סרטון בלי להאט את העמוד

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

שלוש דרכים לשים וידאו באתר

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

הטמעה מיוטיוב: החזית הסטטית

הבעיה בהטמעה רגילה היא שהנגן נטען במלואו גם אצל גולשים שלעולם לא ילחצו עליו. הפתרון הוא חזית (Facade). לפי התיעוד של Lighthouse, חזית היא אלמנט סטטי שנראה כמו הנגן אבל לא פועל: בטעינה מוצגת תמונה עם כפתור הפעלה, כשהעכבר מתקרב מתחילים להתחבר לשרתים של יוטיוב, ובלחיצה החזית מתחלפת בנגן האמיתי. יש ספריות מוכנות לזה, כמו lite-youtube-embed ו-lite-vimeo-embed.

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

חלופה פשוטה יותר, אם אין חזית: מאפיין loading="lazy" על ה-iframe, שדוחה את הטעינה עד שהגולש מתקרב לסרטון. זה עוזר כשהסרטון נמצא נמוך בעמוד, אבל לא כשהוא בראש העמוד. פירטתי במאמר טעינה עצלה.

קובץ וידאו מקומי: המאפיינים שקובעים הכול

לפי MDN, מאפיין preload אומר לדפדפן כמה להוריד מראש: none — כלום, metadata — רק פרטים כמו אורך הסרטון, ו-auto — מותר להוריד את כל הקובץ. ברירת המחדל משתנה בין דפדפנים. web.dev ממליצה על preload="none" לסרטון שלא מתנגן אוטומטית, יחד עם תמונת poster שתופסת את המקום שלו:

<video controls preload="none" poster="cover.webp"
       width="1280" height="720">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
</video>

רוחב וגובה, כמו בתמונות, שומרים מקום ומונעים קפיצות. ותמונת הכיסוי עצמה צריכה להיות דחוסה — ראו דחיסת תמונות.

במקום GIF: וידאו קצר

אנימציות GIF הן מהקבצים הכבדים ביותר ברשת. בדוגמה של web.dev, אותה אנימציה שוקלת 3.7MB כ-GIF, כ-551KB כ-MP4 ו-341KB בלבד כ-WebM. כדי שווידאו יתנהג כמו GIF — מתנגן לבד, בלולאה, בלי קול — משתמשים בארבעה מאפיינים: autoplay, loop, muted ו-playsinline. לפי web.dev, playsinline נדרש כדי שהפעלה אוטומטית תעבוד באייפון.

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

וידאו ברקע של ראש העמוד

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

• קצר — כמה שניות בלולאה — ודחוס היטב, ברזולוציה מתאימה ולא ב-4K.
• תמונת poster שמוצגת מיד, כך שהעמוד נראה שלם גם לפני שהסרטון ירד.
• שקלו לא לטעון את הסרטון בכלל במובייל, ולהציג רק את התמונה.
• כפתור עצירה: לפי עקרונות הנגישות, תוכן שזז ונמשך יותר מכמה שניות צריך דרך לעצור אותו. ראו חוק נגישות אתרים.

נגישות של וידאו

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

שאלות נפוצות

להעלות את הסרטון לוורדפרס או ליוטיוב?

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

הסרטון בראש העמוד הוא ה-LCP. מה עושים?

במקרה כזה תמונת ה-poster היא לרוב מה שנמדד. היא צריכה להיות קלה ולהיטען מוקדם — בלי טעינה עצלה. על המדד עצמו כתבתי במאמר Core Web Vitals.

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