amp-youtube
Displays a YouTube video.
Required Script | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
Supported Layouts | fill, fixed, fixed-height, flex-item, nodisplay, responsive |
Examples | Annotated code example for amp-youtube |
Example
With the responsive layout, the width and height from the example should yield correct layouts for 16:9 aspect ratio videos:
<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270" ></amp-youtube>
<amp-youtube id="myLiveChannel" data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q" width="358" height="204" layout="responsive" > <amp-img src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg" placeholder layout="fill" /> </amp-youtube>
Attributes
autoplay |
If this attribute is present, and the browser supports autoplay:
|
loop |
If this attribute is present, the video or playlist will play again (from the beginning) once it ends. |
data-videoid | The YouTube video id found in every YouTube video page URL. For example, in this URL: https://www.youtube.com/watch?v=Z1q71gFeRqM, |
data-live-channelid | The Youtube channel id that provides a stable livestream url. For example, in this URL: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, UCB8Kb4pxYzsDsHxzBfnid4Q is the channel id. You can provide a data-live-channelid instead of a data-videoid attribute to embed a stable url for a live stream instead of a video. Channels do not come with default placeholders. You can provide a placeholder for the video per example 2 above. |
data-param-* | All Keys and values will be URI encoded. Keys will be camel cased.
See YouTube Embedded Player Parameters for more parameter options for YouTube. Note: Use the |
dock | Requires amp-video-docking extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
For more details, see documentation on the docking extension itself. |
credentials (optional) | Defines a
If you want to use the YouTube player in privacy-enhanced mode, pass the value of |
common attributes | This element includes common attributes extended to AMP components. |
Validation
See amp-youtube rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub