Step 1: Adding header AMP libraries

To begin, we will add the AMP library file, adding these lines into the <head> tag:

<!-- AMP scripts:begin -->
<script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-latest.js" async></script>
<script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-latest.js" async></script>
<link rel="preconnect" href="//cdn.ampproject.org">
<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
<script custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js" async></script>
<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-latest.js" async></script>
<script src="https://cdn.ampproject.org/v0.js" async></script>
<!-- AMP scripts:end -->

You can add the lines using the plug-in Head & Footer Code. Once installed, go to Tools>Header & Footer Code.

And type the libraries in the head section and save.

Using a plug-in, the lines in the header will remain after any WordPress update if you use this plug-in.

Step 2: Adding custom CSS

To add the AMP CSS, go to the menu option Appearance>Customize

And when opening the customize window, go to Additional CSS and insert the custom CSS code

body{
  -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
  -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
  -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
  animation:-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes -amp-start{
  from{visibility:hidden}to{visibility:visible}
}
@-moz-keyframes -amp-start{
  from{visibility:hidden}to{visibility:visible}
}
@-ms-keyframes -amp-start{
  from{visibility:hidden}to{visibility:visible}
}
@-o-keyframes -amp-start{
  from{visibility:hidden}to{visibility:visible}
}
@keyframes -amp-start{
  from{visibility:hidden}to{visibility:visible}
}

And finally, press Publish

Step 3: Creating the ad

Before creating AMP ads, you must install the plug-in Advanced Ads that makes creating and placing your ads easier.
Once you have installed the plug-in, go to the option Advanced Ads > Ads to open the ads creator:

Then click on the [+ New Ad] button

You will see the ads creator form. You must fill the first three fields:

You have to type a name.
Select Plain text and code bullet
Type the AMP HTML code into the Ad Parameters field

<amp-video-iframe
src="https://player.avplayer-amp.com/script/amp/videoplayer/ampplayer.html?AV_TAGID={Aniview’s tag id}&AV_PUBLISHERID={Aniview’s publisher id}"
        width="720"
        height="405"
        layout="responsive"
        controls
       dock="#avdock">
      </amp-video-iframe>
     
      <div style="right: 10PX; position: fixed; top: 10PX;">
        <amp-layout
          width="200"
          height="150"
          id="avdock">
        </amp-layout>
     </div>

This is the way how the fields must be filled.

Once everything is okay, push the Publish button on the right column.

Step 4: Ad placement

After publishing the ad, the Placement window will be triggered. This placement can be used with this ad, or any other ad created.

4.1 Choose placement type

You can choose the best ad placement option by moving the mouse over the icons. Just click one

4.2 Choose a name

Write the name of your placement. This placement will be available for other ads if you want it.

4.3 Choose the ad or group

This is a dropdown list where you will see the name of the ad you created. Just select it

And this is it. This example will show the ad after 1st paragraph on all internal pages

More information about AMP

For header insertion on specific sites, we can also refer here.

For an example page with this setup you can refer here - https://nelsongomez.net/amptest/oppo-working-find-n-fold-and-find/?amp=1

Help

AMP Floating in WordPress Site