AMP

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.