How to Use Plyr.js to Display Videos on Blogger Blogs

How to use plyr.js player to display videos on blogs

In this article we are gonna talk about how you can use plyr.js player in blogger blog posts.
First question arises in our mind that is why we need to use plyr.js player in our blogs?
Answers are very simple, when we directly embed any videos in blogger is not responsive and it makes our blogs looks bad.
There is many advantage of plyr.js player you can read it from official GitHub link and know more.
Now let's talk about how you can setup it in your blog theme.

plyr.js Player Official GitHub

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
plyr.js can be used to display HTML5 Audio, HTML5 Video, iframe (Responsive), YouTube Video, and Vimeo.

How to Install:

First, install the external CSS code first. Install the code directly above the code </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.plyr.io/3.4.7/plyr.css");
//]]>
</script>

Second, install the external Javascript code, install the code directly above the code </body>

<script type='text/javascript' src='https://cdn.plyr.io/3.4.7/plyr.js'></script>
<script type="text/javascript">
/*<![CDATA[*/
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
const plyrs = Array.from(document.querySelectorAll('.js-plyr')).map(plyrs => new Plyr(plyrs));
/*]]>*/
</script>

How to Call:

1. Calling HTML5 Video (Direct Video Links):

<video class="js-plyr" controls playsinline poster="#" src="#">
<source src="#" type="video/mp4" size="480">
<source src="#?720" type="video/mp4" size="720">
<source src="#?1080" type="video/mp4" size="1080">

<!-- Captions are optional -->
<track kind="captions" label="Français" srclang="fr" src="#">
<track kind="captions" label="English" srclang="en" src="#" default>
<track kind="captions" label="Español" srclang="es" src="#">
</video>

Here you have to Edit some values accordingly as your need:

1. [poster = "..."] = Change the contents with the thumbnail image link that you want to use.

Example:
poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJuQTNZTSNdqLo8eYYByVTobsw2xU77jrViXWuehGMewXtW9wvMgVCaDfXS_ERb30Y7E5h0-mHVg_-5qr_k5oSn6SWOKhS0S_dh8V4OXeT8KesQ2hdJx71w8GQVRvSmITmUN0UhxDUZlg/s16000/whatsapp_floating_button_blogger.jpg"

2. [src = "..."] = Replace the content with your video link.

Example:
src="https://cdn.plyr.io/static/blank.mp4"

3. [type = "video / mp4"] = Change with your video extension.

Example:
type="video/mp4"
type="video/mkv"
type="video/webm"

4. [size = "..."] = Change the dimensions of your video.

Example:
size="480"
size="720"
size="1080"

5. [label = "..."] = Change to the name of the subtitle / caption language.

Example:
label="Français"
label="English"
label="Indonesia"

6. [srclang = "..."] = Replace with the country abbreviation in the subtitle / caption language.

Example:
srclang="fr"
srclang="en"
srclang="id"

2. Calling HTML5 Audio (Direct Audio Links):

<audio class='js-player' controls>
<source src="#" type="audio/mp3">
<source src="#" type="audio/m4a">
</audio>

Editable Section:

1. [src = "..."] = Replace the content with your video link.

Example:
src="https://cdn.plyr.io/static/audio.mp3"

3. Calling YouTube Videos:

<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="Z8trbwjikNg"></div>

Note, replace the contents of data-plyr-embed-id = "..." with the id of your Youtube video.

Example:
https://www.youtube.com/watch?v=Z8trbwjikNg
Section Z8trbwjikNg is the id you need.

4. Calling Vimeo Videos:

<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="450996608"></div>

Note, replace the contents of data-plyr-embed-id = "..." with the id of your Vimeo video.

Example:
https://vimeo.com/450996608
Section 450996608 is the id you need.

5. Video Calling with Youtube iFrame:

First, find the video to be used on YouTube, then press the Share button.
Press the Embed button, then copy all the existing code.
After that, give it a wrap like this:

<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/Z8trbwjikNg?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Code <div class="plyr__video-embed" id="player">is the wrapper, inside is the iFrame code to display the video.

You can get more information about customization of CSS, Methods & JSON Settings and Extras.

Thanks you! Have a Nice day.