Embed Youtube in AMP Blogger, Complete with Parameters
How to Embed Youtube in AMP Blogger, Complete with Player Parameters. amp-youtube blogger parameter tutorial without javascript calid AMP blogspots
How to Embed Youtube in AMP Blogger, Complete with Player Parameters
Youtube is one of the largest video platforms and is most widely used by internet users. Billions of videos already uploaded by YouTube users.
Besides being shown on the YouTube website, YouTube videos can also be displayed on a website page by entering YouTube's embed video code. Usually YouTube's default embed code will be like this:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/o0muRSOVZI8"
frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
However, if you have a website based on AMP HTML, of course the code can not be accepted by AMP and make your AMP page error. Some default code changes are needed to become AMP-based code.
You only need to take the Youtube video ID and copy it into the code provided by the AMP Project.
But first, you need to include the following amp-youtube javascript between
Example code embed Youtube video for valid AMP is like below:
And the result is:
You only need to take the Youtube video ID and copy it into the code provided by the AMP Project.
But first, you need to include the following amp-youtube javascript between
<head> </head>.<script async='async' custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>Example code embed Youtube video for valid AMP is like below:
<amp-youtube
data-videoid="o0muRSOVZI8"
layout="responsive"
width="480" height="270">
</amp-youtube>
The yellow mark is the YouTube video ID that you will embed on the website page, which you can get the video ID in the YouTube video URL. Example url: https://www.youtube.com/watch?v=o0muRSOVZI8
Add YouTube Player Parameters in AMP HTML Blogger Template
By adding parameters to the IFrame URL, you can adjust the playback experience in your application.For example, you can automatically play videos using the autoplay parameter or cause the video to play repeatedly using the loop parameter.
On the AMP page, there are some YouTube parameters that you can add to the embed code of AMP Youtube. The trick is to add code
data-param-* (except autoplay) followed by parameter name. Ie, data-param-controls, which serves to remove the button control while the video is being played.I will explain some parameters that you can add to the AMP page, this code also supports the valid AMP Blogger Template.
AMP Youtube - Autoplay
By adding autoplay parameters, the video will automatically play when the user visits your web page. An example of an AMP Youtube embed code with autoplay parameter is as below:
<amp-youtube
data-videoid="o0muRSOVZI8"
layout="responsive"
width="480" height="270"
autoplay='1'>
</amp-youtube>
If this autoplay attribute exists, and the browser supports auto-play, then:
- video sound automatically mute before autoplay starts.
- when the video is scrolled out of view, the video is paused.
- when the video is played to the display, the video continues playback.
- when the user taps the video, the video is voiced.
AMP Youtube - Controls
By adding parameter controls, the video will hide Youtube control buttons like next video, fullscreen, setting, caption and more. Example code embed AMP Youtube with disable controls like below:
<amp-youtube
data-videoid="o0muRSOVZI8"
layout="responsive"
width="480" height="270"
data-param-controls='0'>
</amp-youtube>Result:
AMP Youtube - ShowInfo
By adding the showinfo parameter, the played video will not display the title of the Youtube video. Example code embed AMP Youtube with ShowInfo like below:
<amp-youtube
data-videoid="o0muRSOVZI8"
layout="responsive"
width="480" height="270"
data-param-showinfo='0'>
</amp-youtube>
Result:
AMP Youtube - Rel
By adding the rel parameter, the played video will not display related videos at the end of the video. Example code embed AMP Youtube with rel parameters as below:
<amp-youtube
data-videoid="o0muRSOVZI8"
layout="responsive"
width="480" height="270"
data-param-rel='0'>
</amp-youtube>Result:
You can also combine these three parameters in one youtube video embed code. The result of merging between rel, controls, and showinfo parameters is like this:
Actually there are some youtube video parameters that you can apply, visit YouTube player parameter.
For more details about amp-youtube, please visit this link.
CSS amp-youtube Responsive
I'll give you an example of a CSS code for amp-youtube to be responsive. Copy this CSS after<style amp-custom='amp-custom'> in your blogger AMP template. And call the selector with <div class = 'videoyoutube'>:.videoyoutube{text-align:center;margin:auto;width:100%;}May be useful. If you have questions, please submit in the comments column of this article.