Video embed β bu YouTube, Vimeo, custom video xizmatlaridan video'larni o'z saytingizga qo'shish. Video kontent dwell time va engagement'ni sezilarli oshiradi. Lekin yomon embed strategiyasi β sahifa tezligi pasayadi, Core Web Vitals buziladi, Google penalty xavfi. Smart embed strategiyasi β engagement saqlanadi, performance yaxshi.
YouTube embed asoslari
Klassik iframe embed:
<iframe src=\"https://www.youtube.com/embed/VIDEO_ID\" width=\"560\" height=\"315\"></iframe>
Bu kod oddiy lekin og'ir β YouTube player JavaScript va CSS yuklab oladi.
iframe embed performance muammosi
YouTube iframe ~1MB+ resurs yuklaydi (player JS, thumbnail, CSS). Sahifa LCP va INP'ni buzadi.
Birinchi sahifa load ko'rsatkichlari pasayadi.
Tadqiqot: bir sahifa 10 YouTube embed β 10MB resurs yuklash.
Lite embed strategiyasi
Eng yaxshi yondashuv: video thumbnail va play tugmasini ko'rsatish. Foydalanuvchi click qilsa β iframe yuklash.
Library: lite-youtube-embed (Paul Irish). Pure JavaScript, 1-2KB.
Performance: birinchi sahifa load 100x tezroq.
Facade pattern
Lite embed \"facade pattern\" deb ataladi β haqiqiy embed o'rniga vizual fake. Click bilan haqiqiy embed yuklash.
YouTube, Vimeo, Spotify, Twitter β barcha embed'lar uchun facade strategiyasi mavjud.
YouTube nocookie domain
Klassik youtube.com cookies yuklaydi (foydalanuvchi tracking). youtube-nocookie.com β cookies'siz.
GDPR va privacy uchun yaxshi. Sahifa tezligi ham yaxshi (cookie load yo'q).
URL: https://www.youtube-nocookie.com/embed/VIDEO_ID
Vimeo embed
Vimeo YouTube'dan engilroq. Lekin baribir og'ir.
Vimeo embed code: <iframe src=\"https://player.vimeo.com/video/VIDEO_ID\">
Lite embed: lite-vimeo-embed library.
Self-hosted video
O'z server'ingizda video host qilish. HTML5 video tag:
<video controls>
<source src=\"video.mp4\" type=\"video/mp4\">
</video>
Afzalliklari: nazorat, brand customization, no third-party.
Kamchiliklari: bandwidth qimmat, video format'lar (MP4, WebM, AV1), CDN kerak.
Video CDN
Self-hosted video β CDN majburiy. Bandwidth katta.
Cloudflare Stream, Mux, BunnyCDN β video CDN xizmatlari.
HLS/DASH adaptive bitrate β foydalanuvchi tarmoq tezligiga moslashish.
Autoplay strategiyasi
Autoplay: avtomatik o'ynalish β foydalanuvchini bezor qiladi.
Modern brauzer'lar autoplay video'ni cheklaydi (sound off bo'lsagina).
Strategiya: muted autoplay yoki click bilan o'ynash.
Hero video
Sahifa boshida fon video β visual jihatdan kuchli.
Talab: muted, loop, autoplay, optimized (kichik file, kichik resolution).
Mobile'da poster image β video o'rniga (mobile data tejash).
Lazy load video
Foydalanuvchi video joyiga scroll qilgandagina yuklash.
Intersection Observer API. iframe atribut loading=\"lazy\" β modern brauzer'larda support.
Thumbnail va poster
Video oldida thumbnail rasm β engaging va informational.
HTML5 video: poster=\"preview.jpg\".
YouTube: avtomatik thumbnail (yoki custom).
Caption va subtitle
Accessibility uchun caption majburiy. Screen reader emas, lekin eshitmaydigan foydalanuvchilar.
YouTube: avtomatik caption. Custom: SRT yoki WebVTT format.
Multilingual caption β global auditoriya uchun.
Mobile video
Mobile'da video β performance va data ehtiyot.
Strategiya: kichik resolution (480p), short video, poster image avval.
Click bilan o'ynash β foydalanuvchi xohlasa.
Video SEO
VideoObject Schema markup β Google qidiruv natijasida video carousel.
Video sitemap β alohida sitemap.
Transcript β Google va accessibility uchun.
Performance metrika
Lighthouse audit: \"Third-party code blocks main thread\" β YouTube iframe ta'siri.
Largest Contentful Paint: video tagligi LCP'ga bevosita ta'sir.
Cumulative Layout Shift: video o'lcham aniqlanmasa CLS oshadi.
Common video xato
1. Ko'p iframe embed β sahifa juda sekin.
2. Autoplay sound bilan β foydalanuvchi bezor.
3. Mobile'da hero video β data eb tashlash.
4. Schema yo'q β SEO foyda yo'q.
5. Caption yo'q β accessibility yomon.
Sayt.uz video strategiyasi
Sayt.uz blog'da YouTube embed lite version bilan. Thumbnail + play button. Click qilgandagina iframe yuklash.
YouTube nocookie domain β GDPR uchun.
Mobile: poster image avval, click bilan video.
VideoObject Schema markup.
Performance: lite embed bilan birinchi sahifa load 1.8s (klassik embed 4.5s).
Natija: video engagement saqlanadi, performance yaxshi.
Self-hosted video yo'q β bandwidth tejash. YouTube/Vimeo embed yetadi.