iframe'leri ekleme
Important: this documentation is not applicable to your currently selected format email!
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.
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.
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.