Header Ads Widget

YouTube video in an AMP version of a Blogger (Blogspot) post

YouTube video in an AMP version of a Blogger (Blogspot) post


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>

YouTube video in an AMP version of a Blogger (Blogspot) post 1


BY AMP Iframe and AMP Img

You can use the <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>

YouTube video in an AMP version of a Blogger (Blogspot) post 2



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>

Posting Komentar

0 Komentar