İçindekiler

iframe'leri ekleme

Important: this documentation is not applicable to your currently selected format stories!

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