Embedding a Video on Your AMP Page

Follow

Embedding a Youtube, Wistia, or Vimeo Video on Your AMP Page

 

Embedding a video on your AMP Page normally requires a custom AMP javascript installation plus a special AMP html format addition to add the video to your page. For Youtube, Wistia and Vimeo videos, Unbounce has taken care of adding that AMP javascript for you.

  1. To add a Youtube, Wistia, or Vimeo video, drag and drop the Embed Video image6.png widget onto your AMP page. A new dialog box will appear.
  2. Copy the embed video code provided by your video website into the blank field.
  3. Click the Save Code button at the bottom right-hand corner of the dialog box.
  4. image5.png
  5. Save your page.
  6. Click the Publish/Republish button in the page overview screen.

Note:

Ensure that your embed video code is in an IFrame format. Only IFrame embeds are supported by this feature.

 

Embedding Other Media on Your AMP Page

For other media on platforms that are not Youtube, Wistia, or Vimeo, you’ll need to follow the process set out in Google’s AMP media documentation. Adding other media is a two step process:

  • Step 1: Add the javascript for your chosen media.
  • Step 2: Add the custom html to embed the media onto your AMP page.

Step 1: Add the javascript for your chosen media.

  1. Find the appropriate documentation for your media platform.

Note: If your media platform is not available in Google’s embed list it may not be possible to embed your media and still retain the AMP designation. See Google’s documentation on Images and Video for more information.

  1. Copy the code marked Required Script.
  2. image1.png
  3. Navigate to the Unbounce Builder. Find the page overview for your AMP page and click the Edit button.
  4. Click the Javascripts image2.png button at the bottom left-hand corner of the page. A new dialog box will appear.
  5. In the Script Name field, add the title for your media embed script. Select Head from the Placement drop-down menu. Paste the required script from the Google documentation into the blank box.
  6. Click the Save Code button in the bottom right hand corner of the dialog box.

 

Step 2: Add the custom html to embed the media onto your AMP page.

  1. Copy the code under Example for the appropriate documentation for your media platform.
  2. image3.png
  3. Drag the Custom HTML image4.png widget onto the area of the page where you’d like to embed your media. A new dialog box will appear.
  4. In the new dialog box, paste the code from the Google documentation page. Follow the instructions in the Google documentation to ensure that you edit the code to add in the ID for the specific media that you’re adding to your page.
  5. image7.png
  6. Click the Save Code button in the bottom right-hand corner of the page.
  7. Save your page.
  8. Click the Publish/Republish button in the Page Overview screen.
Was this article helpful?
0 out of 1 found this helpful