HTML iframe: YouTube, xarita va boshqa sahifani joylash

Qisqacha: iframe sahifa ichida boshqa sahifani — o'zining alohida HTML, CSS va JavaScript'i bilan — "oyna" ichida ko'rsatadi. YouTube videosi, xarita, forma shu usulda joylanadi. Har bir iframe ga ekran o'quvchi uchun title beriladi, pastdagilariga loading="lazy". allow atributi esa joylangan sahifa qaysi imkoniyatlardan (to'liq ekran, kamera, joylashuv) foydalana olishini belgilaydi.

Bu darsda

• iframe qanday ishlashini va u oddiy rasmdan nimasi bilan farq qilishini tushunasiz.
• YouTube videosini va xaritani saytga joylaysiz.
• title, loading, allow, allowfullscreen va referrerpolicy ni to'g'ri qo'yasiz.
• Tayyor embed kodni tahlil qilib, uni tozalaysiz.
• iframe ning cheklovlarini bilasiz.

Oldin bilishingiz kerak: video va audio, Origin va Same-Origin Policy.

1. Nega bu kerak?

video darsida aytgan edik: katta videolarni o'z saytingizda saqlash qimmat va qiyin. Rustam akaning 15 daqiqalik videosi YouTube'da turibdi. Uni choyxona saytida ham ko'rsatish kerak.

"Aloqa" sahifasiga esa xarita kerak — mijoz choyxonani topsin. Xaritani o'zingiz yasamaysiz: Yandex yoki Google xaritasini joylaysiz.

Ikkala holatda ham siz boshqa saytning sahifasini o'z sahifangiz ichida ko'rsatasiz. Buni iframe qiladi (inline frame — "ichki ramka").

2. iframe — sahifa ichidagi sahifa

<iframe src="https://example.com"
        title="Namuna sahifa" width="600" height="400">
</iframe>

iframe ichida — to'liq, alohida sahifa. Uning o'z DOM'i, CSS'i va JavaScript'i bor. Xuddi derazadan qo'shni hovliga qaragandek: siz ko'rasiz, lekin u yerdagi narsalarni o'zgartira olmaysiz.

Bu img dan katta farq:

O'lcham berilmasa, iframe 300 ga 150 piksel bo'ladi. Brauzer uning atrofiga ingichka ramka ham chizadi — uni CSS bilan olib tashlash mumkin.

3. YouTube videosini joylash

3.1 Tayyor kodni olish

YouTube'da video ostidagi Share (Ulashish) → Embed (Joylash) tugmasini bosing. Tayyor kod chiqadi, taxminan shunday:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media;
         gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

VIDEO_ID o'rnida — videoning noyob kodi (manzildagi v= dan keyingi 11 belgi).

Bu kod ishlaydi. Lekin uni ko'r-ko'rona ko'chirish o'rniga, har bir atributni tushunaylik — ba'zilari ortiqcha, ba'zilarini yaxshilash kerak.

3.2 Tozalangan variant

<iframe width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Video: Rustam aka Toshkent oshini damlaydi"
  loading="lazy"
  allow="encrypted-media; picture-in-picture; fullscreen"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

Nima o'zgardi va nega — keyingi bo'limlarda.

4. Atributlar

4.1 title — majburiy

Ekran o'quvchi iframe ga yetganda uning title ini aytadi. YouTube'ning standart "YouTube video player" nomi hech narsa demaydi — sahifada uchta video bo'lsa, uchalasi bir xil nomlanadi.

title iframe ichidagi mazmunni aytsin: "Video: Rustam aka Toshkent oshini damlaydi", "Xarita: Choyxona «Bahor» manzili". Havola matni va alt bo'yicha qoidalar bu yerda ham ishlaydi.

html-validate title siz iframe ni xato deydi:

<iframe> is missing required "title" attribute

4.2 loading="lazy"

YouTube iframe'i ochilishi bilan yuzlab kilobayt skript va rasmlarni yuklaydi — foydalanuvchi videoni ijro etmasa ham. Rasm unumdorligi darsidagi loading="lazy" iframe'lar uchun ham ishlaydi: iframe foydalanuvchi unga yaqinlashgandagina yuklanadi.

Qoida xuddi rasmdagidek: birinchi ekrandagi iframe'ga lazy qo'ymang, pastdagilarga — albatta.

4.3 allow — ruxsatlar

Zamonaviy brauzerlar sahifaga "kuchli" imkoniyatlarni beradi: kamera, mikrofon, joylashuv, to'liq ekran, avtomatik ijro. Begona iframe ularni avtomatik olmasligi kerak. allow atributi — iframe'ga qaysi imkoniyatlar ruxsat etilgani ro'yxati. Bu mexanizm Permissions Policy ("ruxsatlar siyosati") deyiladi.

Qiymatlar nuqta-vergul bilan ajratiladi. Tamoyil: faqat kerakli narsaga ruxsat bering. Video uchun kamera va mikrofon kerak emas. YouTube kodidagi accelerometer va gyroscope (telefonning harakat datchiklari — 360° videolar uchun) oddiy video uchun ortiqcha.

4.4 allowfullscreen

allowfullscreen — to'liq ekranga ruxsat beruvchi eski atribut. Bugun uning vazifasini allow="fullscreen" bajaradi. YouTube kodida ikkalasi ham bor — moslik uchun. Tozalangan variantda allow ichidagi fullscreen yetarli.

4.5 referrerpolicy

Iframe yuklanganda brauzer boshqa saytga "foydalanuvchi qaysi sahifadan keldi" degan ma'lumotni — Referer sarlavhasini yuboradi (HTTP sarlavhalari darsida ko'rgansiz). referrerpolicy qancha ma'lumot yuborilishini boshqaradi:

• strict-origin-when-cross-origin — boshqa saytga faqat saytingiz nomi (https://example.com) boradi, aniq sahifa manzili emas. Bu brauzerlarning standart qiymati ham.
• no-referrer — hech narsa yuborilmaydi.

4.6 frameborder — eskirgan

frameborder="0" — ramkani olib tashlovchi eski atribut. Validator ogohlantiradi:

Warning: The “frameborder” attribute on the “iframe” element is obsolete. Use CSS instead.

Tarjimasi: "iframe dagi frameborder atributi eskirgan. O'rniga CSS ishlating." Tozalangan variantda uni olib tashladik — ramkani CSS'da border: none bilan olib tashlaymiz.

4.7 youtube-nocookie.com

Manzildagi youtube.com o'rniga youtube-nocookie.com — YouTube'ning "kengaytirilgan maxfiylik rejimi". Unda foydalanuvchi videoni ijro etmaguncha YouTube kuzatuv cookie'larini kamroq o'rnatadi. Video xuddi shunday ishlaydi.

Tekshirib ko'ring: Sahifaga video darsni joyladingiz. allow ga camera; microphone ham yozilgan. Nima uchun bu yomon?

5. Xaritani joylash

Xarita servislari ham tayyor iframe kodi beradi:

• Google Maps: joyni toping → Share → Embed a map → kodni nusxalang.
• Yandex Xaritalar: "Xaritalar konstruktori" orqali joy belgilanadi va kod olinadi.

Natija taxminan shunday bo'ladi (manzil — namuna):

<iframe src="https://www.google.com/maps/embed?pb=..."
        title="Xarita: Choyxona «Bahor», Chilonzor, 7-mavze"
        width="600" height="450" loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
</iframe>

Xarita ostiga manzilni matn bilan ham yozing — address darsidagi kabi. Ekran o'quvchi foydalanuvchisi xaritadan foydalana olmaydi, sekin internetda xarita yuklanmasligi mumkin, matnli manzil esa har doim ishlaydi.

6. iframe ning cheklovlari

6.1 Ichiga "kira olmaysiz"

Boshqa saytning iframe'i — boshqa origin. Same-Origin Policy darsida ko'rdik: brauzer turli origin'lar bir-birining ma'lumotlarini o'qishini taqiqlaydi. Demak:

• CSS bilan iframe ichidagi matnning rangini o'zgartira olmaysiz.
• JavaScript bilan uning ichidagi kontentni o'qiy olmaysiz.

Iframe va sahifa bir-biri bilan faqat maxsus "xabar almashish" usuli orqali gaplasha oladi. Uni keyingi darsda eslatib o'tamiz.

6.2 Ba'zi saytlar joylashga ruxsat bermaydi

Google, bank saytlari va ko'p boshqa saytlarni iframe'ga qo'ysangiz, bo'sh ramka yoki shunday yozuv chiqadi:

www.google.com refused to connect.

Tarjimasi: "www.google.com ulanishdan bosh tortdi." Sayt server sarlavhalari orqali "meni boshqa saytlarga joylamang" deydi. Bu — xavfsizlik chorasi. Nega kerakligini keyingi darsda ko'ramiz. Bunday saytlar uchun rasmiy "embed" kodini qidiring (masalan, xaritaning maxsus embed manzili) yoki oddiy havola bering.

6.3 Moslashuvchan o'lcham

width va height — faqat piksellar, butun son. width="100%" — xato:

Error: Bad value “100%” for attribute “width” on element “iframe”: Expected a digit but saw “%” instead.

Tarjimasi: "iframe ning width atributi uchun '100%' — yaroqsiz qiymat: raqam kutilgan edi, '%' uchradi." Iframe'ni ekran kengligiga moslashni CSS qiladi (width: 100% va nisbat uchun aspect-ratio). HTML'da esa haqiqiy nisbatni bildiruvchi o'lchamlar qoladi: video uchun 560×315 (16:9).

7. Ko'p uchraydigan xatolar

7.1 Tayyor kodni ko'r-ko'rona ko'chirish

Embed kodida eskirgan frameborder, ma'nosiz title="YouTube video player" va keraksiz ruxsatlar qoladi. Tuzatish: 3.2-bo'limdagi kabi tozalang.

7.2 Hamma iframe darhol yuklanadi

Sahifada beshta video — hammasi sahifa ochilishi bilan yuklanadi, sahifa bir necha megabayt og'irlashadi. Tuzatish: pastdagilarga loading="lazy". Yana yaxshi yechim — "facade" — keyingi darsda.

7.3 Butun saytni iframe'ga o'rash

"O'zimizning sahifada do'kon ham bo'lsin" deb boshqa saytni to'liq iframe qilib qo'yish. Foydalanuvchi uchun noqulay (ikkita aylantirish chizig'i, "Orqaga" tugmasi chalkashadi), ko'p saytlar esa buni bloklaydi. Tuzatish: oddiy havola bering yoki saytning rasmiy vidjetidan foydalaning.

8. Mashqlar

1-mashq (oson): Atributni tanlang

1. Ekran o'quvchi aytadigan iframe nomi —
2. Pastdagi iframe'ni kechiktirib yuklash — loading qiymati:
3. Iframe'ga ruxsatlar ro'yxati beriladigan atribut —

2-mashq (o'rta): Embed kodni tozalang

<iframe width="100%" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; camera; clipboard-write;
         encrypted-media; gyroscope; microphone; picture-in-picture"
  allowfullscreen></iframe>

Video — "Manti tayyorlash" darsi, sahifaning pastki qismida.

<iframe width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Video: qovoqli manti tayyorlash"
  loading="lazy"
  allow="encrypted-media; picture-in-picture; fullscreen"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

3-mashq (qiyin): "Aloqa" sahifasiga xarita va video

1. Google Maps yoki Yandex Xaritalar'dan istalgan joyning embed kodini oling va aloqa/index.html ga qo'ying.
2. title ni mazmunli qiling, loading="lazy" qo'shing.
3. Xarita ostiga manzilni matn bilan yozing (address bilan).
4. Istalgan YouTube videosini (masalan, osh retsepti) tozalangan shaklda qo'shing.
5. npx html-validate — xato 0.

<h2>Bizni qanday topish mumkin</h2>
<iframe src="https://www.google.com/maps/embed?pb=..."
        title="Xarita: Choyxona «Bahor», Chilonzor, 7-mavze"
        width="600" height="450" loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
</iframe>
<address>
  Choyxona «Bahor»<br>
  Chilonzor tumani, 7-mavze, 15-uy, Toshkent
</address>

9. Real ishda

• Deyarli har bir kichik biznes sayti "Aloqa" sahifasida xarita iframe'ini ishlatadi. Restoran, klinika, do'kon — hammasida.
• Onlayn to'lovlar. Ba'zi to'lov tizimlari karta raqamini kiritish maydonini o'z iframe'ida beradi. Karta ma'lumotlari sizning saytingizga umuman tegmaydi — xavfsizlikning kuchli usuli.
• Vidjetlar — onlayn chat, sharhlar bloki, ijtimoiy tarmoq postlari, reklamalar — ko'pincha iframe orqali.
• Unumdorlik auditi. Lighthouse og'ir uchinchi tomon (third-party) kodlarini ko'rsatadi. Ko'pincha ularning boshida — YouTube va xarita iframe'lari.

Xulosa

• iframe — sahifa ichidagi alohida sahifa: o'z DOM'i, CSS'i, JavaScript'i bilan.
• title majburiy va mazmunli: "Video: ...", "Xarita: ...".
• Pastdagi iframe — loading="lazy"; birinchi ekrandagi — yo'q.
• allow — faqat kerakli ruxsatlar (Permissions Policy); allowfullscreen — eski usul, allow="fullscreen" yetarli.
• referrerpolicy — boshqa saytga qancha ma'lumot yuborilishi; frameborder eskirgan — CSS ishlating.
• Boshqa origin iframe'ining ichiga CSS va JS kira olmaydi; ba'zi saytlar joylashni umuman taqiqlaydi.

Keyingi dars: iframe xavfsizligi va unumdorligi — sandbox, clickjacking hujumi va og'ir iframe'larni tez yuklash usuli.

Manbalar

• MDN: <iframe>, "Permissions Policy", "Referrer-Policy" — developer.mozilla.org
• YouTube Help: "Embed videos & playlists" va "Turn on privacy-enhanced mode" — support.google.com/youtube