iFrame Oluşturucu

Herhangi bir URL girin ve bir sayfayı, formu veya uygulamayı web sitenize gömmek için sabit boyutlu ya da duyarlı, temiz bir iframe kodunu ücretsiz alın. Kayıt gerekmez.
iFrame Oluşturucu
Gömmeye izin veren herhangi bir sayfa; örneğin https://example.com/booking/

Önizleme boş mu ya da “bağlanmayı reddetti” mi diyor? Site, başka sitelerin onu bir çerçevede göstermesine izin vermiyor (X-Frame-Options veya Content-Security-Policy başlığı) ve bunu yalnızca sahibi değiştirebilir. Daha fazla bilgi

Form, yorum veya akış mı gömüyorsunuz? Elfsight widget'ları widget'ına bakın →
İçerideki sayfanın ziyaretçinin nereden geldiğine dair öğrendikleri (referrerpolicy özniteliği).
Orantılı: yükseklik, bir video gibi genişliği izler. Sabit: piksel cinsinden belirlenmiş bir yükseklik.

Sayfayı gömün

<div style="position:relative;width:100%;aspect-ratio:16 / 9;">
  <iframe src="https://example.com/" title="example.com" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;"><a href="https://tr.elfsight.com/tools/iframe-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a> ile oluşturuldu</p>

  1. Kopyalamak için yukarıdaki Kodu kopyala düğmesine tıklayın.
  2. Sayfanın HTML dosyasını veya şablonunu açın.
  3. Kodu, içeriğin görünmesini istediğiniz yere, <body> içine yapıştırın.
  4. Sayfayı kaydedip yükleyin, ardından kontrol etmek için tarayıcıda açın.

Form, yorum veya akış mı gömüyorsunuz? Elfsight widget’ları bunu iframe olmadan yapar ve sitenizin tasarımıyla uyum sağlar. Elfsight widget'ları widget'ına bakın →

Ayrılmadan önce

Form, yorum veya akış mı gömüyorsunuz? Elfsight widget’ları bunu iframe olmadan yapar ve sitenizin tasarımıyla uyum sağlar.

Elfsight widget'ları widget'ına bakın →
Ya da bu ücretsiz aracı paylaşın:

iFrame Oluşturucu ile iframe’i elle yazmanın karşılaştırması

Bir iframe tek satırlık HTML’dir; ancak onu erişilebilir, hızlı ve güvenli yapan öznitelikleri unutmak veya yanlış yazmak kolaydır. Oluşturucuyla hazırladığınızda nelerin değiştiği burada.
iframe’i elle yazmak
Bu oluşturucu
Öznitelikler
Her özniteliğin adını ve tam değerlerini hatırlamanız gerekir.
Öznitelikleri bir listeden seçersiniz; her birinin yanında kısa bir açıklama vardır.
Erişilebilir başlık
Çoğu zaman atlanır; bu yüzden ekran okuyucu kullanıcıları çerçevenin neyi içerdiğini bilmez.
Çerçevenin yardımcı teknoloji için etiketlenmesi amacıyla bir title ister.
Korumalı alan
allow-* belirteçlerini kendiniz yazar ve her birinin neyi açtığına bakarsınız.
Her belirteç için, neye izin verdiğini sade bir dille açıklayan bir onay kutusu.
Duyarlı boyut
En boy oranı veya sabit yükseklik için CSS’i kendiniz yazarsınız.
Bir en boy oranı veya sabit yükseklik seçin; kod boyutlandırmayı içerir.
Bu sayfa gömülebilir mi?
Çerçeve boş göründüğünde, yayımladıktan sonra öğrenirsiniz.
Kodu kopyalamadan önce sayfanın X-Frame-Options ve frame-ancestors başlıklarını kontrol eder.
Video ve form bağlantıları
Olduğu gibi yapıştırılan bir YouTube izleme sayfası veya Google Form bağlantısı yüklenmeyebilir ya da yanlış görünebilir.
YouTube, Vimeo ve Google Form bağlantılarını tanır ve sizi ilgili özel oluşturucuya yönlendirir.

Öznitelikler

iframe’i elle yazmak

Her özniteliğin adını ve tam değerlerini hatırlamanız gerekir.

Bu oluşturucu

Öznitelikleri bir listeden seçersiniz; her birinin yanında kısa bir açıklama vardır.

Erişilebilir başlık

iframe’i elle yazmak

Çoğu zaman atlanır; bu yüzden ekran okuyucu kullanıcıları çerçevenin neyi içerdiğini bilmez.

Bu oluşturucu

Çerçevenin yardımcı teknoloji için etiketlenmesi amacıyla bir title ister.

Korumalı alan

iframe’i elle yazmak

allow-* belirteçlerini kendiniz yazar ve her birinin neyi açtığına bakarsınız.

Bu oluşturucu

Her belirteç için, neye izin verdiğini sade bir dille açıklayan bir onay kutusu.

Duyarlı boyut

iframe’i elle yazmak

En boy oranı veya sabit yükseklik için CSS’i kendiniz yazarsınız.

Bu oluşturucu

Bir en boy oranı veya sabit yükseklik seçin; kod boyutlandırmayı içerir.

Bu sayfa gömülebilir mi?

iframe’i elle yazmak

Çerçeve boş göründüğünde, yayımladıktan sonra öğrenirsiniz.

Bu oluşturucu

Kodu kopyalamadan önce sayfanın X-Frame-Options ve frame-ancestors başlıklarını kontrol eder.

Video ve form bağlantıları

iframe’i elle yazmak

Olduğu gibi yapıştırılan bir YouTube izleme sayfası veya Google Form bağlantısı yüklenmeyebilir ya da yanlış görünebilir.

Bu oluşturucu

YouTube, Vimeo ve Google Form bağlantılarını tanır ve sizi ilgili özel oluşturucuya yönlendirir.

iframe öznitelikleri başvurusu

Her özniteliğin ne yaptığı ve ne zaman kullanılacağı. Güvenlik ipucu: üçüncü taraf içeriğe ihtiyaç duyduğu en az izni verin.
Seçenek
Ne yapar
Değerler
Notlar
src
Çerçevenin içinde gösterilecek sayfanın adresi.
Tam bir URL
Bir https:// adresi kullanın. HTTPS sitesinde tarayıcılar düz http:// üzerinden yüklenen çerçeveleri engeller.
title
Çerçeveyi ekran okuyucular için etiketler.
Kısa metin; örneğin “Mağaza konum haritası”
İçeriği kısaca tanımlayın. Olmazsa yardımcı teknoloji kullananların içinde ne olduğunu öğrenmek için çerçeveye girmesi gerekir.
width / height
Çerçeve boyutunu piksel cinsinden ayarlar.
Sayılar; olmazsa çerçeve 300 × 150 olur
Sayfayla birlikte ölçeklenen bir çerçeve için sabit sayılar yerine CSS kullanın (width: 100% ve aspect-ratio).
loading
Tarayıcının çerçeveyi ne zaman yükleyeceğini denetler.
eager (varsayılan), lazy
lazy, çerçeve görünür alana yaklaşana kadar bekler ve sayfanın ilk yüklenmesini hızlandırır. Sayfanın daha aşağısındaki çerçeveler için iyidir.
allow
Çerçevedeki sayfaya tarayıcı özelliklerine erişim verir (izin politikası).
Noktalı virgülle ayrılmış bir liste; örneğin fullscreen; autoplay
Yalnızca içeriğin ihtiyaç duyduğu özellikleri listeleyin. Kamera, mikrofon ve konum ayrıca özen gerektirir.
allowfullscreen
Çerçevenin tam ekrana geçmesine izin verir.
Var veya yok
Eski bir özniteliktir. Modern karşılığı allow="fullscreen"’dir; birçok gömme kodu ikisini de içerir.
referrerpolicy
Sayfanızın adresinin ne kadarının çerçevedeki siteye gönderileceğini denetler.
no-referrer, origin, strict-origin-when-cross-origin (varsayılan) ve diğerleri
Varsayılan, diğer sitelere yalnızca alan adınızı gönderir. unsafe-url’den kaçının: güvenli olmayan sitelere bile tam adresi gönderir.
sandbox
Çerçevedeki sayfaya katı kısıtlamalar uygular. Her allow-* belirteci bir kısıtlamayı kaldırır.
Boş (tüm kısıtlamalar) veya allow-scripts, allow-forms, allow-popups gibi belirteçler
Tamamen güvenmediğiniz içerik için kullanın. Kendi sitenizden bir sayfa için allow-scripts ile allow-same-origin’i birleştirmeyin: birlikte sayfanın korumalı alanı kaldırmasına izin verirler.

src

Ne yapar

Çerçevenin içinde gösterilecek sayfanın adresi.

Değerler

Tam bir URL

Notlar

Bir https:// adresi kullanın. HTTPS sitesinde tarayıcılar düz http:// üzerinden yüklenen çerçeveleri engeller.

title

Ne yapar

Çerçeveyi ekran okuyucular için etiketler.

Değerler

Kısa metin; örneğin “Mağaza konum haritası”

Notlar

İçeriği kısaca tanımlayın. Olmazsa yardımcı teknoloji kullananların içinde ne olduğunu öğrenmek için çerçeveye girmesi gerekir.

width / height

Ne yapar

Çerçeve boyutunu piksel cinsinden ayarlar.

Değerler

Sayılar; olmazsa çerçeve 300 × 150 olur

Notlar

Sayfayla birlikte ölçeklenen bir çerçeve için sabit sayılar yerine CSS kullanın (width: 100% ve aspect-ratio).

loading

Ne yapar

Tarayıcının çerçeveyi ne zaman yükleyeceğini denetler.

Değerler

eager (varsayılan), lazy

Notlar

lazy, çerçeve görünür alana yaklaşana kadar bekler ve sayfanın ilk yüklenmesini hızlandırır. Sayfanın daha aşağısındaki çerçeveler için iyidir.

allow

Ne yapar

Çerçevedeki sayfaya tarayıcı özelliklerine erişim verir (izin politikası).

Değerler

Noktalı virgülle ayrılmış bir liste; örneğin fullscreen; autoplay

Notlar

Yalnızca içeriğin ihtiyaç duyduğu özellikleri listeleyin. Kamera, mikrofon ve konum ayrıca özen gerektirir.

allowfullscreen

Ne yapar

Çerçevenin tam ekrana geçmesine izin verir.

Değerler

Var veya yok

Notlar

Eski bir özniteliktir. Modern karşılığı allow="fullscreen"’dir; birçok gömme kodu ikisini de içerir.

referrerpolicy

Ne yapar

Sayfanızın adresinin ne kadarının çerçevedeki siteye gönderileceğini denetler.

Değerler

no-referrer, origin, strict-origin-when-cross-origin (varsayılan) ve diğerleri

Notlar

Varsayılan, diğer sitelere yalnızca alan adınızı gönderir. unsafe-url’den kaçının: güvenli olmayan sitelere bile tam adresi gönderir.

sandbox

Ne yapar

Çerçevedeki sayfaya katı kısıtlamalar uygular. Her allow-* belirteci bir kısıtlamayı kaldırır.

Değerler

Boş (tüm kısıtlamalar) veya allow-scripts, allow-forms, allow-popups gibi belirteçler

Notlar

Tamamen güvenmediğiniz içerik için kullanın. Kendi sitenizden bir sayfa için allow-scripts ile allow-same-origin’i birleştirmeyin: birlikte sayfanın korumalı alanı kaldırmasına izin verirler.

MDN Web Docs: iframe öğesi ↗

Bir site neden iframe’de açılmıyor

Çerçeve boş veya “bağlanmayı reddetti” gösteriyor.

Site bir X-Frame-Options başlığı gönderiyor. DENY tüm çerçevelemeyi engeller; SAMEORIGIN yalnızca sitenin kendi sayfalarında izin verir. Site gömmeyi yasaklamıştır ve bu sizin tarafınızdan aşılamaz. Bunun yerine sayfaya bağlantı verin veya site sahibine bir gömme seçeneği sunup sunmadığını sorun.

Sitenin güvenlik politikası çerçeveyi engelliyor.

Site, kendisini gömmesine izin verilen siteleri listeleyen frame-ancestors içeren bir Content-Security-Policy gönderiyor ('none' kimseye izin verilmediği anlamına gelir). Varsa tarayıcılar X-Frame-Options yerine onu izler. Alan adınızı listeye yalnızca site sahibi ekleyebilir.

Çerçeve tek başına yükleniyor ama HTTPS sitenizde yüklenmiyor.

src, http:// ile başlıyor. Tarayıcılar güvenli sayfalarda güvenli olmayan çerçeveleri engeller ve otomatik yükseltmez. Adresi https:// olarak değiştirin; sitenin HTTPS sürümü yoksa güvenli bir sayfaya gömülemez.

Bir YouTube bağlantısı videonun yerine hata gösteriyor.

Normal YouTube izleme sayfaları çerçevelemeyi yasaklar. Videonun gömme adresini (youtube.com/embed/…) veya özel YouTube oluşturucusunu kullanın.

Sayfa yükleniyor ama içindeki düğmeler, formlar veya bağlantılar hiçbir şey yapmıyor.

sandbox özniteliği bunları engelliyor. Yalnızca ihtiyaç duyduğunuz belirteçleri ekleyin: etkileşimli içerik için allow-scripts, formları göndermek için allow-forms, yeni sekme açan bağlantılar için allow-popups.

Video tam ekrana geçmiyor ya da kamera veya mikrofon çalışmıyor.

Bu özelliklere allow özniteliğinde izin verilmelidir; örneğin allow="fullscreen; camera; microphone".

Site oluşturucunuz kodu kaydettikten sonra kaldırıyor.

Bazı düzenleyiciler iframe’leri normal metin bloklarından siler. Kodu özel bir HTML veya gömme bloğuna yapıştırın.

iframe nasıl oluşturulur

  1. Sayfa adresini girin

    Göstermek istediğiniz sayfanın URL’sini yapıştırın.

  2. Boyutu ve davranışı ayarlayın

    Boyutu seçin, duyarlı tutun ve gerekirse kaydırmaya veya tam ekrana izin verin.

  3. Önizlemeyi kontrol edin

    Bazı siteler bir çerçevede gösterilmeye izin vermez; önizleme bunu hemen gösterir.

  4. Kodu kopyalayın

    Kodu sitenizdeki bir HTML bloğuna yapıştırın.

Sık sorulan sorular

Daha fazla Gömme kodu oluşturucular

YouTube Gömme Kodu Oluşturucu

Herhangi bir YouTube bağlantısını yapıştırın ve saniyeler içinde duyarlı bir gömme kodu alın.YouTube Gömme Kodu Oluşturucu

Video Gömme Kodu Oluşturucu

Herhangi bir yerde barındırılan videoyu gömün: MP4, Google Drive, Dropbox, Loom veya Wistia.Video Gömme Kodu Oluşturucu

X (Twitter) Gömme Oluşturucu

Herhangi bir gönderi bağlantısını orijinal görünümüyle bir gömmeye dönüştürün.X (Twitter) Gömme Oluşturucu

PDF Gömme Oluşturucu

PDF menüyü, fiyat listesini veya broşürü sayfa içinde gösterin.PDF Gömme Oluşturucu