My Backlink - Sometimes a Blogger needs to display a Youtube video playlist on the blog, be it a music video playlist, video tutorial, or other video.
For non AMP blogs, to display youtube video playlist, can use the embed code provided by Youtube which formatted iframe code.
But for blogs that use AMP HTML, to display Youtube video playlist there are 2 ways that is by using amp-youtube and amp-iframe.
Video embed code provided by Youtube is usually as below.
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofX" frameborder="0" gesture="media" allowfullscreen></iframe>The marked code is the embed URL of the Youtube playlist.
First you have to do is place the JS AMP Youtube code below inside
<head><script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>Well to display the Youtube playlist in AMP HTML with amp-iframe actually I've discussed in the postlist video playlist Youtube for AMP HTML blog, please make it like this.
<amp-iframe width="560"
height="315"
layout="responsive"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
frameborder="0"
allowfullscreen="allowfullscreen"
src="URL_EMBED_PLAYLIST_YOUTUBE">
</amp-iframe>Please replace URL_EMBED_PLAYLIST_YOUTUBE with the URL of the embed Youtube playlist above the one I marked.
But to watch Youtube video playlists using amp-iframes, playlist with amp-iframe should be stored approximately 75% from the top edge of the screen when the page first opened before scroll, and make sure it has js amp-iframe installed.
Read Also:
Create a responsive youtube video on Non AMP blog
Create youtube video autoplay and no autoplay on AMP blog
Create youtube video autoplay on blog No AMP blog
And to display a playlist of Youtube videos using amp-youtube, please see the code below.
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid="ID_VIDEO"
data-param-listType="playlist"
data-param-list="ID_PLAYLIST">
</amp-youtube>ID_VIDEO please replace with your youtube video ID and replace also ID_PLAYLIST with ID of your youtube video playlist, , for example the code below.
https://www.youtube.com/watch?v=QhxU_95FXY8&list=PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofXFor example as below:
<amp-youtube
width="480"
height="270"
layout="responsive"
data-videoid="QhxU_95FXY8"
data-param-listType="playlist"
data-param-list="PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofX">
</amp-youtube>With amp-youtube we can display youtube videos anywhere either above or below post, and make sure you have js amp-youtube installed on your blog.
Hope this article useful to you and good luck.
