HTML iFrames Nedir ?, Web sitesine Youtube videosu nasıl eklenir ?

HTML iframe etiketi, bir web sayfasına başka bir web sayfasını yerleştirmek için kullanılır. “Inline Frame” anlamına gelen iframe, sayfa içinde farklı içerikler sunmak, harita ve video gibi medya öğelerini görüntülemek için idealdir.

iFrame Kullanımı

Basit bir iframe eklemek için HTML’de aşağıdaki kodu kullanabilirsiniz:

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

Bu örnekte, src niteliği iframenin hangi URL’yi göstereceğini belirler. width ve height ile iframe’in genişlik ve yüksekliği ayarlanabilir. İframe etiketine border CSS özelliği verilerek çerçeve rengi veya stili değiştirilebilir.

iFrame İçin Önemli Nitelikler

• src: İframe’in içine yüklenecek sayfanın URL’si.
• width ve height: İframe’in genişlik ve yükseklik değerleri (piksel veya yüzde olarak).
• frameborder: Çerçevenin varlığını belirler (0 veya 1). Genelde CSS ile border: none; kullanmak tercih edilir.
• allowfullscreen: Video ve diğer medya içeriklerinin tam ekran yapılmasına olanak tanır.
• sandbox: İframe’in içinde çalışan sayfa üzerinde güvenlik kısıtlamaları uygular. sandbox="allow-scripts allow-same-origin" gibi değerler belirlenebilir.
• loading: lazy veya eager olarak ayarlanabilir. loading="lazy" ile iframe sayfanın yüklenmesini geciktirir ve sayfa hızını artırır.

iFrame ile Video ve Haritalar Gösterme

İframe, YouTube ve Google Maps gibi hizmetleri sayfaya eklemek için sıklıkla kullanılır:

YouTube Videosu Ekleme

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Bu kod, src niteliğine bir YouTube URL’si eklenerek sayfaya gömülü bir video yerleştirir.

Google Haritalar Ekleme

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093773!2d144.9631577153158!3d-37.81627977975132" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Bu kod, belirli bir lokasyondaki Google Haritalar bağlantısını iframe içine yerleştirir ve haritanın sayfada görüntülenmesini sağlar.

iFrame Kullanımında Dikkat Edilmesi Gerekenler

• Güvenlik: Farklı bir kaynaktan gelen içerikler güvenlik riski oluşturabilir. Bu yüzden sandbox niteliği ile güvenlik kısıtlamaları uygulamak önemlidir.
• Sayfa Performansı: Özellikle çok sayıda iframe, sayfa yüklenme süresini etkileyebilir. loading="lazy" niteliğini kullanarak iframelerin sayfa yüklendikten sonra açılmasını sağlayabilirsiniz.
• SEO: İframe içindeki içerikler, ana sayfanın SEO’suna katkıda bulunmaz. İçeriklerin arama motoru tarafından dizine alınmasını istiyorsanız iframe yerine doğrudan sayfa içine eklemeyi tercih edin.

HTML iFrames, sayfada ekstra özellikler ve içerikler sunmak için oldukça işlevseldir. Ancak, güvenlik ve performans konularına dikkat ederek kullanılması önemlidir.