שילוב סרטוני YouTube בכרטיסי מוצר ב-1C-Bitrix

כאשר בכרטיס מוצר יש iframe של YouTube, Lighthouse מתריע על 15 בקשות חיצוניות ומדדי Core Web Vitals צונחים?

שלושה סרטונים בעמוד — 45 בקשות, העמוד מאט, משתמשי מובייל עוזבים. אנו פותרים בעיה זו באמצעות תבנית Facade: תמונה ממוזערת סטטית במקום iframe, הנגן נטען רק בלחיצה. התוצאה — LCP לא נפגע, ולקוחות צופים בסרטונים ללא עיכובים. במשך יותר מחמש שנים, יישמנו יותר מ-50 אינטגרציות כאלה — מ-iframe פשוט ועד גלריות מלאות עם טעינה עצלה וסימון SEO. קבלו ייעוץ — נבחן את הפרויקט שלכם תוך יום.

בעיות עיקריות בעת אינטגרציה של וידאו

ביצועים הם הנושא המרכזי. כל iframe ישיר של YouTube מבצע 10–15 בקשות לצד שלישי (סגנונות, סקריפטים, עוגיות). תבנית Facade מפחיתה בקשות HTTP לאפס לפני לחיצה — זה מהיר פי 10 מ-iframe רגיל. שנית, SEO. תוכן וידאו אינו ממוקד ללא מיקרודאטה של VideoObject. שלישית, תצוגת מובייל: נגנים סטנדרטיים חופפים תוכן ואינם מתאימים לרוחב המסך. אנו פותרים את כל השלוש: facade + schema.org + תבנית רספונסיבית. הזמינו ביקורת על כרטיס המוצר הנוכחי שלכם — נראה היכן הומרה אובדת.

כיצד להאיץ טעינת עמוד עם וידאו

במקום iframe ישיר — תמונה ממוזערת סטטית של YouTube עם כפתור הפעלה. הנגן נטען רק בלחיצה. השוו:

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

<div class="yt-facade" data-video-id="dQw4w9WgXcQ">
  <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Видеообзор товара" loading="lazy" width="640" height="360">
  <button class="yt-play-btn" aria-label="Воспроизвести видео"></button>
</div>

document.querySelectorAll('.yt-facade').forEach(function(facade) {
  facade.addEventListener('click', function() {
    const videoId = this.dataset.videoId;
    const iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1';
    iframe.allow = 'autoplay; encrypted-media';
    iframe.allowFullscreen = true;
    iframe.width = '640';
    iframe.height = '360';
    this.replaceWith(iframe);
  });
});

אנו משתמשים בדומיין <div class="yt-facade" data-video-id="dQw4w9WgXcQ"> <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Видеообзор товара" loading="lazy" width="640" height="360"> <button class="yt-play-btn" aria-label="Воспроизвести видео"></button> </div> — ללא מעקב עוגיות, ללא האטה מעוגיות צד שלישי.

מדוע VideoObject חשוב לאינדוקס

אנו מוסיפים נתונים מובנים VideoObject ב-document.querySelectorAll('.yt-facade').forEach(function(facade) { facade.addEventListener('click', function() { const videoId = this.dataset.videoId; const iframe = document.createElement('iframe'); iframe.src = 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1'; iframe.allow = 'autoplay; encrypted-media'; iframe.allowFullscreen = true; iframe.width = '640'; iframe.height = '360'; this.replaceWith(iframe); }); }); . לפי Schema.org, VideoObject חייב לכלול embedUrl, thumbnailUrl ותיאור. דוגמה:

if ($videoId = parseYoutubeId($arResult['PROPERTIES']['VIDEO_YOUTUBE']['VALUE'][0] ?? '')) {
    $videoSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'VideoObject',
        'name' => $arResult['NAME'] . ' — видеообзор',
        'description' => strip_tags($arResult['PREVIEW_TEXT']),
        'thumbnailUrl' => "https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg",
        'embedUrl' => "https://www.youtube.com/embed/{$videoId}",
        'uploadDate' => date('c'),
    ];
    echo '<script type="application/ld+json">' . json_encode($videoSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . '</script>';
}

גוגל רואה נתונים אלה ומציגה וידאו בחיפוש, ודפי AMP מקבלים כרטיס נפרד. לאחר יישום מיקרודאטה, ההמרה מחיפוש גדלה ב-20–30%.

כיצד להגדיר מספר סרטונים בגלריה

בגלריות Fancybox/Swiper, וידאו מתווסף כשקופית עם youtube-nocookie.com. ראשית, חלצו את מזהה הווידאו:

function parseYoutubeId(string $url): ?string {
    $patterns = [
        '/(?:v=|\/embed\/|\/shorts\/|youtu\.be\/)([a-zA-Z0-9_-]{11})/',
    ];
    foreach ($patterns as $pattern) {
        if (preg_match($pattern, $url, $m)) {
            return $m[1];
        }
    }
    return null;
}

function getYoutubeEmbedUrl(string $videoId, array $params = []): string {
    $defaults = [
        'rel' => 0,
        'modestbranding' => 1,
        'enablejsapi' => 1,
    ];
    $query = http_build_query(array_merge($defaults, $params));
    return "https://www.youtube-nocookie.com/embed/{$videoId}?{$query}";
}

לאחר מכן, בתבנית הרכיב אנו יוצרים את HTML של הגלריה. עבור כל סרטון, נוצרת שקופית נפרדת עם <script type="application/ld+json"> וקישור embed. בעת טעינת 3 סרטונים בו-זמנית, מספר הבקשות נשאר אפס עד ללחיצה — ה-facade פותר את הבעיה.

תהליך עבודה

1. אנליטיקה — חקר מאפייני infoblock נוכחיים, תבניות, זיהוי צווארי בקבוק. מדידת ביצועים באמצעות Lighthouse.
2. עיצוב — תכנית אחסון, בחירת תבנית (Facade/ישיר), אב-טיפוס על מוצר בדיקה.
3. יישום — יצירת מאפיין, שינוי תבנית, הוספת לוגיקת JS, מיקרודאטה.
4. בדיקה — בדיקה על מוצרים אמיתיים, מכשירי מובייל, מהירות טעינה באמצעות Lighthouse. ודאו ש-LCP השתפר ב-30%.
5. פריסה — העלאה לסביבת ייצור, בדיקת סנכרון עם 1C (אם וידאו מתווסף דרך XML).

מה כוללת העבודה

• הגדרת מאפיין infoblock לקישורי YouTube
• יישום תבנית Facade עם נגן מותאם אישית
• אינטגרציה עם גלריית המוצר הקיימת
• הוספת מיקרודאטה VideoObject
• בדיקת ביצועים וגרסת מובייל
• תיעוד למנהלים כיצד להוסיף סרטונים

טעויות נפוצות בעת אינטגרציה של וידאו

• iframe ישיר ללא טעינה עצלה. כל iframe כזה מקטין LCP בכ-1.5 שניות. השתמשו ב-facade.
• חוסר במיקרודאטה. וידאו אינו ממוקד, גוגל אינה מציגה אותו בתוצאות החיפוש.
• התעלמות ממכשירי מובייל. הגדירו data-type="iframe" עבור הנגן והשתמשו בתמונות ממוזערות רספונסיביות.

לוחות זמנים והערכה

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