YouTube ve Vimeo Videolarını Lazy Load Yapma

Standart bir YouTube veya Vimeo iframe’i, kullanıcı daha "Oynat" tuşuna basmadan arka planda yaklaşık 1 MB~ veri yükler ve siteniz daha açılmadan ağırlaşır.

Bu kod, sayfa yüklendiğinde videoları indirmez. Sadece küçük bir ön izleme resmi (thumbnail) koyar ve kullanıcı tıkladığında asıl videoyu çağırır.

<script>//<![CDATA[ document.querySelectorAll('.youtube-embed, .vimeo-embed').forEach(video => {
    // 1. Video türüne göre görsel ve kaynak adreslerini belirle
    const [img, src] = video.classList.contains('youtube-embed')
        ? [`i.ytimg.com/vi_webp/${video.dataset.id}/maxresdefault.webp`, 'www.youtube.com/embed']
 : [`vumbnail.com/${video.dataset.id}.jpg`, 'player.vimeo.com/video'];
    // 2. Gizli videoları görünür yap
 video.classList.contains('hidden') && video.classList.remove('hidden');
 // 3. Ön izleme resmini (Thumbnail) yerleştir
 video.insertAdjacentHTML('afterbegin', `
        <img alt='${video.title ? video.title.replace(/["']/g, '') : "thumbnail"}'
             loading='lazy'
             src='https://${img}'
             style='cursor:pointer; width:100%; display:block;'>
    `);
    // 4. Tıklandığında Iframe'i oluştur ve oynat
    video.addEventListener('click', () => {
        video.innerHTML = `
            <iframe
                allow='autoplay'
                frameborder='0'
                allowfullscreen
                aria-label='${video.title ? video.title.replace(/["']/g, '') : "video"}'
                src='https://${src}/${video.dataset.id}?autoplay=1'>
            </iframe>`;
    });
});//]]></script>

Kodun kullamı şu şekildedir.

<div class="youtube-embed hidden" data-id="VIDEO_ID_BURAYA" title="Bir Video"></div>

<div class="vimeo-embed hidden" data-id="VIDEO_ID_BURAYA" title="Bir Video"></div>
6 Yorum