Create a Youtube AMP Video Playlist On AMP Blog

Youtube Video Playlist AMP

Live Demo Here

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-RQrPntL1sK7bbBVJHlO8zJjkTxofX


For 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.
LEARN MORE

Creating Parallax Adsense In Blogs Non-AMP

Creating Parallax Adsense In Blogs Non-AMP

MyBacklink86 - We can create parallax ads on AMP blogs easily with the help of js amp-fx-flying-carpet.

Of course it will not work on non AMP blogs because it's specifically for blogs with AMP templates.

So what if we want to create a parallax ad on non AMP blog?

Parallax ads can be for banner image, ads with iframe and for adsense.

If you want to try it, please you follow the steps below.

Please save the code below and place it above </head>

Click 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Then save the code below and place it above this code <div class='post-body entry-content' ........

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://4.bp.blogspot.com/-RzxVWJw3Uho/WcKesObgvwI/AAAAAAAAEsg/-5IWkUTJIAYacQNaGvc0bqbXl2Svy35xQCLcBGAs/s640/Adsense%2BIn%2BThe%2BMiddle%2BOf%2BBlog%2BArticles.png" alt="banner" width="300" height="250" />

      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

If you use it for your image banner ads (banner with height 600px and width 300px), please replace the url image in the code above.

If you use to ad code with iframe or adsense (300x600 ads), please remove the <img> tag above and replace your adsense code.
LEARN MORE

How to Make Easy Youtube AMP Video on Blog

How to Make Easy Youtube AMP Video on Blog

MyBacklink86 - In this post my backlink will share how to make Youtube AMP video on AMP blog.

If you have a video on Youtube and you want to display it on your blog then you can make a Youtube video and save embed youtube video playlist on your blog.

If you are using AMP blog, you can also display Youtube AMP video by using Youtube AMP code.

Please follow how to make youtube AMP video below.

1. Please put this code just below <head> code.

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

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

2. Show Youtube AMP video singles on your AMP blog please use the code below.

No Autoplay

Embed YouTube videos via the video id. The id is found in every Youtube video page URL.

<amp-youtube width="480" height="270" layout="responsive" data-videoid="VIDEO ID HERE">
</amp-youtube>


Replace VIDEO ID HERE with your Video Youtube ID (data-videoid = "VIDEO ID HERE")

Autoplay

Setting autoplay will automatically play/pause the YouTube video as it is scrolled into/out of view on supported browsers.

The YouTube video is automatically muted before autoplay starts, when the user taps the video, the video is unmuted.

If the user has interacted with the YouTube video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it.

<amp-youtube width="480" height="270" layout="responsive" data-videoid="VIDEO ID HERE" autoplay></amp-youtube>


Replace VIDEO ID HERE with your Video Youtube ID (data-videoid = "VIDEO ID HERE")

This code can be stored in your blog widget or in your blog post.

Make it easy to implement Youtube AMP code in Blog.

Hope this article useful to you.

Good luck
LEARN MORE
Subscribe to: Posts (Atom)