Html iframe Nedir? iframe Kullanımı ve iframe Kodu

Bu yazımızda iframe nedir? iframe kullanımı ve siteye youtube video ekleme konularından bahsedeceğim. İlk olarak iframe’in ne olduğundan başlayalım.

iframe Nedir?

iframe etiketi, varolan bir web sayfası içerisinde başka bir web sitesini, web sitesinin bir sayfasını veya youtube videoları gibi içerikleri görüntülememizi sağlayan bir Html etiketidir.

Örneğin sitemizde video paylaşımı yapmak istiyorsak, genelde videoları youtube gibi paylaşım sitelerine yükleriz. Daha sonra videoların iframe kodunu alıp web sayfamıza yerleştirdiğimizde, o video artık sayfamızda izlenebilir duruma gelir. Böylece video başka bir yerde depolandığından kendi sunucumuzdaki depolama alanından tasarruf sağlamış oluruz.

 ⇒  iframe’ler aynı zamanda sitenizin hızına da olumlu katkı sağlarlar. Çünkü iframe kullanılmayan bir web sayfası düşünelim. Bu sayfayı açtığımızda server bütün sayfayı yükleyecektir. Server’a fazla yük bindirdiğimiz için site hızımız yavaşlayacaktır. iframe kullanıldığında ise server tüm sayfayı değil sadece o kısmı yükleyeceği için sayfamız daha hızlı açılmış olacaktır. Bunu ajax ile yapılan işlemlere benzetebiliriz.

iframe nedir sorusunun cevabını vermeye çalıştım. Artık iframe kodu ile web sayfalarına sayfa, video vb.. yerleştirme işlemini nasıl yapabileceğimize bakalım.

iframe Kullanımı

iframe kodunu web sayfalarımızda istediğimiz yere istediğimiz özelliklerini kullanarak yerleştirebiliriz. İlk olarak iframe etiketi ile kullanabildiğimiz attribute’lar nelerdir ve ne işe yarar bunları inceleyelim. 

► src : Göstermek istediğimiz web sitesinin veya videonun kaynak adresini belirtiriz.

► width : Iframe’in genişliğini belirtiriz. Değeri pixel veya % (yüzde) olarak verebiliriz. 

► height : Iframe’in yüksekliğini belirtiriz. Değeri pixel veya % (yüzde) olarak verebiliriz. 

► frameborder : Iframe’in kenarlığının kalınlığını belirtmek için kullanırız. iframe’lerin varsayılan olarak bir kenarlığı bulunuyor.

Eğer frameborder’a 1 değerini verirsek kenarlık koyarken, 0 değerini verdiğimizde kenarlık olmaz.

► border : Iframe’in kenar kalınlığını belirtiriz.

► title : Iframe’in başlığını belirtiriz.

► name : Iframe’e isim vermek için kullanırız.

► scrolling : Kaydırma çubuklarının durumunu belirtiriz.

• Varsayılan değeri auto‘dur. Yani iframe ile çağrılan sayfa, pencere içerisine sığmadığında kenar çubukları oluşur.
• Eğer no değerini verirsek kenar çubukları hiç bir koşulda oluşmaz. 
• Eğer yes değerini verirsek kenar çubukları her zaman görünür durumda olur.

► align : Iframe’in konumunu belirtiriz. Şu değerleri verebiliriz.

• left
• right
• top
• middle
• bottom 

iframe Kodu

iframe’in kullanımını, alabildiği attribute’ları yukarda öğrendik. Bir Html sayfasına en basit haliyle nasıl iframe ekleyebiliriz ona bakalım.

Kullanımı şu şekildedir.

Tabiki bu en basit haliyle iframe kullanımı. iframe etiketi ile kullanmamız gereken olmazsa olmaz attribute src attribute’dur. 

Şimdi de bir örnek üzerinde uygulamalı görelim. Şu an bulunduğunuz site yani www.mehsatek.com‘u iframe olarak bu sayfaya ekleyelim.

iframe kodu

 ⇒  Gördüğünüz gibi src değerine bu siteyi yazdım.

 ⇒  Kenarlık istemediğim için frameborder değerine 0 yazdım.

 ⇒  Yatayda tam görünmesi için genişlik değerine 100% verdim.

 ⇒  Son olarak yükseklik değerine 500 verdim. 

Siz uygulamalarınızda diğer attribute’ları da kullanabilirsiniz.

iframe olarak yerleştirilmiş web sayfası

Gördüğünüz gibi bir html sayfası içerisinde başka bir web sitesini iframe etiketi ile görüntüleyebiliyoruz.

Siteye Youtube Video Ekleme

Bu konuyla ilgili detaylı anlattığım bir yazım bulunuyor. Html sayfalarınıza Youtube videolarının nasıl eklendiğini öğrenmek için Siteye Youtube Video Ekleme Nasıl Yapılır? yazımı okuyabilirsiniz. 

Html iframe kullanımı bu şekilde.

Şu yazılar da ilginizi çekebilir.

Siteye Google Map Ekleme (Harita, Adres, Konum Ekleme)

Umarım sizin faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.