iFrame, bir web sayfasına dışarıdan video, ses, doküman gibi interaktif veri eklemeye yarayan bir HTML etiketidir. Web sayfası içerisinde başka bir siteyi iç içe göstermeye yardımcı olur. Bu sayede farklı sitelerde içerikleri bir sitede gösterebilirsiniz. HTML diline ait bir kod yapısına sahip olmasından dolayı birçok web programlama dili ile uyumlu bir kullanım imkânı sunar.  

iFrame Nedir?

iFrame, Türkçesi “satır içi çerçeve” olarak ifade edilen “inline frame” kelimelerinin kısaltılmasından oluşur. Başka bir web sitesini bir çerçeve içerisinde kendi sitenizde göstermenize yardımcı olur. Diğer bir ifadeyle başka bir HTML belgesini size ait web sitesine gömer. Birbirinden ayrı yerde bulunan web sayfaları tek sayfada çerçeveler halinde gösterir. HTML 4.0 ile standart hâle getirildikten sonra HTML 5.0 ile kullanılmaya başlanır.

iFrame Ne Amaçla Kullanılır?

iFrame, başka bir yerdeki web sayfasını kendi web sitenizde göstermek amaçla kullanılır. YouTube videosu, Twitter, Facebook paylaşımı gibi içerikleri kendi sitenizde gösterebilirsiniz. Bu sayede web sitenize gelen ziyaretçiler, sayfa içerisinde yapılan yönlendirmeleri sitenizden ayrılmadan görme imkânı bulur. Bunun yanında video gibi içeriklerin sitenizde oluşturacağı yükü dış kaynağa dağıtır.

iFrame, yapısı gereği normalde güvenli tehdidi oluşturmaz. Görevi, geliştiricinin web sitesinde gösterilmesini istediği dış kaynak içeriği sitede göstermektir. Ziyaretçinin ilgisini çekmek, ziyaretçiyi sitede tutmak gibi avantajları vardır. Diğer taraftan, geliştiricinin bilgisi dışında sitenin içerisine zararlı bir web sayfası içeriği gömmek de mümkün olabilir. iFrame kod enjeksiyonu olarak ifade edilen bu güvenlik zafiyeti, ziyaretçileri kötü niyetli sitelere yönlendirebilir, iFrame içerisine konulan bir buton ile ziyaretçilerin cihazlarına virüs yükler ve veri hırsızlığına neden olabilir.

iFrame Nasıl Kullanılır?

Başka bir sitedeki içeriği <iframe> etiketi arasına alarak iFrame kodunu kullanabilirsiniz. Etiket içerisinde temel olarak src öznitelik değerine içerik kaynağını belirten URL yazılması yeterlidir. Aşağıda örnek bir iFrame kodu görebilirsiniz:

<iframe src=""https://www.youtube.com/embed/-TGnwTelsO0?si=74tbRxWqp9MUFxuz""></iframe>

src dışında çerçevenin boyutu, kaydırma çubuğu ekleme gibi çerçeveyi özelleştirebileleceğiniz öznitelik tanımları da bulunur. Gelin bu tanımlardan bazılarına bakalım:

• name: Çerçeveye isim ataması yapar. Web sayfasına ait CSS kodunda bu ismi kullanabilirsiniz.
• height: Çerçevenin boy uzunluğunu belirler. Değer belirtilmediğinde varsayılan değer 150 pikseldir.
• width: Çerçevenin genişlik uzunluğunu belirler. Değer belirtilmediğinde varsayılan değer 300 pikseldir.
• frameborder: Çerçevenin kenarlık kalınlığını belirtir. Varsayılan değer 0’dır yani kenarlıksızdır.
• allow: “fullscreen, autoplay” gibi gömülü içeriğe uygun kullanıcının yapmasına izin verilen değeri belirtir.
• scrolling: Çerçeveye kaydırma çubuğu ekler.
• loading: İçeriğin nasıl yüklenmesi gerektiğini belirtir. Bazı durumlara gömülü içerikteki web sayfası cevap vermediği için asıl web sayfası açılmaz. Bu da hem ziyaretçi davranışlarına hem de SEO’ya olumsuz olarak etkiler. Böyle bir durumda “lazy” değeri kullanılırsa içeriği site açıldıktan sonra yükler. “eager” yazılırsa site açılışında ilk önce çerçevedeki içeriği yükler.
• align: Çerçevenin sayfadaki konumunu belirtir. Kullanılabilecek değerler “middle, top, left, right, bottom” şeklindedir.

Aşağıda örnek bir iFrame kodu görebilirsiniz:

<iframe
width=""560""
height=""315""
src=""https://www.youtube.com/embed/-TGnwTelsO0?si=AAQeGSqWro0-JOsF""
title=""YouTube video player""
frameborder=""0""
allow=""accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share""
align=”middle”>
</iframe>