Gömülü İçerik

Ders 18/45 · 4 dakika · 2 soru

Bu dersin sonunda sayfanıza YouTube videosu veya harita gibi başka sayfalardan içerik gömebileceksiniz.

`iframe` etiketi

iframe, sayfanızın içinde başka bir sayfa gösteren bir penceredir.

<iframe src="https://ornek.com" title="Örnek site" width="400" height="300"></iframe>

src Gösterilecek sayfanın adresi.
title Pencerenin ne içerdiğinin açıklaması. Ekran okuyucular bunu okur, her iframe için yazın.
width ve height Pencerenin boyutları.

Bu dersteki kodları kendi dosyanızda deneyin

Bu sitedeki önizleme kutuları güvenlik kısıtlamaları olan birer iframe olduğundan gömülü sayfalar içlerinde düzgün çalışmaz. Bu yüzden bu dersteki kodları kopyalayıp kendi index.html dosyanızda açın.

YouTube videosu gömmek

YouTube’da videoyu açın.
Videonun altındaki Paylaş düğmesine basın.
Yerleştir seçeneğine basın.
Karşınıza çıkan iframe kodunu kopyalayıp body içine yapıştırın.

Kod aşağı yukarı şöyle görünür:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_KODU" title="YouTube video oynatıcısı" allowfullscreen></iframe>

Harita gömmek

OpenStreetMap haritaları da bu yöntemle eklenebilir. Aşağıda İstanbul’un bir bölümünü gösteren bir örnek var:

<iframe width="400" height="300" title="İstanbul haritası" src="https://www.openstreetmap.org/export/embed.html?bbox=28.9,41.0,29.0,41.05&amp;layer=mapnik"></iframe>

Adresin içindeki & ifadesine dikkat edin. Özel Karakterler dersinde gördüğümüz gibi HTML’de & işareti bu şekilde yazılır.

Google Haritalar’da da bir konum açıp Paylaş > Harita yerleştirme yolunu izleyerek benzer bir kod alabilirsiniz.

Güvenlik

Gömdüğünüz sayfa, sayfanızın içinde çalışır. Bu yüzden yalnızca güvendiğiniz kaynaklardan içerik gömün.

sandbox niteliği

sandbox niteliği, gömülü sayfanın yapabileceklerini kısıtlar. Hapkod’daki önizleme kutuları da bu niteliği kullanır. Formların bu kutularda gönderilememesinin nedeni de budur.

Sık yapılan hatalar

Sayfa görünmüyor. Birçok site güvenlik nedeniyle başka sayfalara gömülmeyi reddeder. Bu bir kod hatası değildir, o sitenin kararıdır.

title yazmamak. Ekran okuyucu kullananlar pencerenin ne içerdiğini anlayamaz.

Soru 1

Bir sitenin iframe içinde boş görünmesinin en olası nedeni nedir?

Site, başka sayfalara gömülmeyi engelliyordur :: Doğru.
iframe artık desteklenmiyordur :: iframe bütün tarayıcılarda desteklenir.
Sayfada h1 yoktur :: Bunun iframe ile ilgisi yoktur.

Soru 2

Hangi nitelik her iframe için yazılmalıdır?

allowfullscreen :: Bu yalnızca tam ekran izni verir.
title :: Doğru.
sandbox :: sandbox bazı durumlarda kullanışlıdır ama her iframe için gerekli değildir.

Görev

Kendi index.html dosyanızda şunları yapın:

Sevdiğiniz bir YouTube videosunu sayfanıza gömün.
Altına, yaşadığınız şehri gösteren bir harita ekleyin.
İki iframe için de anlamlı bir title yazın.

Bu derste öğrendikleriniz

iframe, sayfanızın içinde başka bir sayfa gösterir.
YouTube ve harita siteleri hazır iframe kodu verir.
Her iframe bir title taşımalıdır ve yalnızca güvenilir kaynaklar gömülmelidir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.