amp-vine

Edit on Github
Open in Playground

Introduction

Embed Vine videos in your AMP HTML files.

Setup

Import the amp-vine component in the header.

<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>

Basic Usage

A Vine embed has equal width and height. You can find the vineid in the each vine's URL.

Example

<amp-vine width="400"
  height="400"
  data-vineid="MdKjXez002d">
</amp-vine>

Resposive Layout

Resposive layout works as well. In that case you can use any value for height and width as long as they are the same.

Example

<amp-vine width="1"
  height="1"
  layout="responsive"
  data-vineid="MdKjXez002d">
</amp-vine>