%20post.webp "YouTube video in an AMP version By Bimbel Jakarta Timur")
YouTube video in an AMP (Accelerated Mobile Pages) version of a Blogger (Blogspot) post
Ensure that your Blogger template includes the necessary AMP JavaScript library by adding the following line in the <head> section of your HTML:
By AMP Youtube
<script custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
<amp-youtube data-videoid="hMlaYtxWmiA" layout="responsive" width="480" height="270" autoplay> </amp-youtube>
BY AMP Iframe and AMP Img
<amp-iframe> component with the src attribute pointing to the YouTube video URL and include the required attributes within the sandbox attribute. Here's how you can convert your <iframe> code to use <amp-iframe>
Ensure that your Blogger template includes the necessary AMP JavaScript library by adding the following line in the <head> section of your HTML:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>
then:<amp-iframe
width="480"
height="270"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
frameborder="0"
allowfullscreen
src="https://www.youtube.com/embed/hMlaYtxWmiA?autoplay=1"
>
<amp-img
layout="fill"
src="https://img.youtube.com/vi/hMlaYtxWmiA/hqdefault.jpg"
alt="Sifat Dan Letak Bayangan Pada Cermin Cekung BIMBEL JAKARTA TIMUR"
></amp-img>
</amp-iframe>
or
<amp-iframe width="480" height="270" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/wnDf6xeQ7qg?autoplay=1"> <amp-img layout="fill" src="https://img.youtube.com/vi/wnDf6xeQ7qg/hqdefault.jpg" alt="Efek Doppler BIMBEL JAKARTA TIMUR" ></amp-img> <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'PT Sans Narrow'; font-size: 48px; color: white; text-shadow: 0 0 0.5em black;" >▶</span></amp-iframe>
if with amp-youtube
<amp-youtube data-videoid="iWK-_-VDKCY" layout="responsive" width="480" height="270" autoplay></amp-youtube><span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'PT Sans Narrow'; font-size: 48px; color: white; text-shadow: 0 0 0.5em black;">▶</span>
