How to Install Responsive JS Videos on Blogger

How to Install Responsive JS Videos on Blogger

Video JS is an open source HTML video media player that uses the JavaScript language. Of course, you must have heard of this JS video player, apart from being simple, the video that you install will appear responsive.

Installing JS videos is a little different, in general, to install JS videos, you need a JS video CDN, which you can get  here .

For those of you who are interested in implementing it on a blog or website, see how and the installation steps below:

1. The first step is to click Themes > Edit HTML, place the code below right above the code </head> or use CTRL+F to speed up the search

<link href="https://cdn.statically.io/gh/ryan-lee59/player.css/master/namasitusanda.css" rel="stylesheet"></link>
<script>
$(document).ready(function(){
    videojs("example_video_1").ready(function(event){
      var myPlayer = this;     
      myPlayer.on("ended", function(){
      alert("video ended");
      });
   });     
});
</script>

2. Put the code below before the code ]]></b:skin>

.video-js .vjs-control-bar { display: block; }
  @font-face {
    font-family: 'VideoJS';
    src: url('https://vjs.zencdn.net/f/1/vjs.eot');
    src: url('https://vjs.zencdn.net/f/1/vjs.eot?#iefix') format('embedded-opentype'), 
      url('https://vjs.zencdn.net/f/1/vjs.woff') format('woff'),     
      url('https://vjs.zencdn.net/f/1/vjs.ttf') format('truetype');
  }

3. Then look for the code </body>then place the following code right above the code </body>

<script src="https://vjs.zencdn.net/4.3.0/video.js"></script>

4. The final step is to write a post in HTML mode, enter the code below:

<div class="video-js-box">
<video class="video-js vjs-default-skin" controls="" height="360px" id="example_video_1" poster="URL Gambar Kalian" preload="none" width="100%">
                
<source src="URL Video Kalian" type="video/mp4"></source>
    <source src="URL Video Kalian" type="video/webm"></source>        
</video>
</div>

That's how to make and install responsive JS videos on blogger.

Post a Comment