Embedding a Youtube, Wistia, or Vimeo Video on Your AMP Page
Note:Videos embedded on an AMP page will not autoplay or loop.
- To add a Youtube, Wistia, or Vimeo video, drag and drop the Embed Video widget onto your AMP page. A new dialog box will appear.
- Copy the embed video code provided by your video website into the blank field.
- Click the Save Code button at the bottom right-hand corner of the dialog box.
- Save your page.
- Click the Publish/Republish button in the page overview screen.
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 2: Add the custom html to embed the media onto your AMP page.
- 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.
- Copy the code marked Required Script.
- Navigate to the Unbounce Builder. Find the page overview for your AMP page and click the Edit button.
- 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.
- 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.
- Copy the code under Example for the appropriate documentation for your media platform.
- Drag the Custom HTML widget onto the area of the page where you’d like to embed your media. A new dialog box will appear.
- 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.
- Click the Save Code button in the bottom right-hand corner of the page.
- Save your page.
- Click the Publish/Republish button in the Page Overview screen.