İçindekiler

iframe'leri ekleme

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

Temel bilgiler

amp-iframe bileşenini kullanarak sayfanızda bir iframe görüntüleyebilirsiniz.

Iframe'ler, AMP'de, kullanıcı tarafından yazılan JavaScript gerektiren içerikler gibi ana sayfa bağlamında desteklenmeyen içerikleri görüntülemek için özellikle yararlıdır.

`amp-iframe` için gereklilikler

En az 600 piksel veya en üstten uzak olarak ilk görüntü alanının %75'i kadar olmalıdır (placeholder kullanan iframe'ler hariç).
Kaynakları yalnızca HTTPS aracılığıyla talep edebilir ve aynı kök kaynağa izin vermeyi belirtmedikleri müddetçe kapsayıcıyla aynı başlangıç noktasında olmamalıdır.

OKUMAYA DEVAM EDİN - amp-iframe özelliklerinin tamamı hakkında daha fazla bilgi edinin.

Betik ekleme

Sayfanıza bir amp-iframe eklemek için, önce aşağıdaki betiği <head> dahil edin; bu betik, genişletilmiş bileşen için ek kodu yükler:

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Biçimlendirme yazma

Aşağıdaki örnekte, Google Maps Embed API aracılığıyla bir Google Haritasını yerleştirmek için duyarlı bir amp-iframe oluşturduk:

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

Yer tutucuları kullanma

amp-iframe , iframe hazır olana kadar yer tutucu olarak görüntülenecek placeholder özniteliğine sahip bir öğe (örneğin, bir amp-img öğesi) içermesi koşuluyla, bir belgenin üstünde bir amp-iframe görüntüleyebilirsiniz.

OKUMAYA DEVAM EDİN -: Yer tutuculu iframe'deki yer tutucular hakkında daha fazla bilgi edinin.

Yer tutuculu örnek:

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

Şu şekilde oluşturulur:

Örnekler

Daha gelişmiş amp-iframe örneklerini AMP By Example içinde bulabilirsiniz.

Written by @pbakaus
with contributions from @Meggin and @bpaduch