Halaman

    Social Items



Until now, I still haven't found many Bloggers who use video uploads on Blogger. Yes, of course, maybe the reason is that videos uploaded on Blogger cannot be cashed like Youtube. 

But in my opinion, this is not the right reason for not using this one Blogger feature. We can still generate from ads that are posted in posts. This can be useful for tutorial videos with free video hosting from Blogger. 

But another problem is the Blogger embed code has not been responsive. Of course, this can interfere with the appearance of the blog on a smaller screen. For that, now I will share the tricks so that videos uploaded on Blogger can be responsive.

Uploading videos on Blogger are very easy, obviously, the video file must be prepared for example in MP4 format. Please click the upload video icon in the top bar in the post editor in compose mode as shown below.



Please upload your video. After the video upload process is complete, please switch the post editor to HTML mode to get the video code. Usually, the code will look like the following.

<object id="BLOG_video-c90f4624c2abcde" class="BLOG_video_class" contentid="c90f4624c2abcde" width="320" height="266" ></object>

The code I marked is the code needed in the next step. 

And here is how to embed videos uploaded on Blogger to be responsive.

1. For Non-Amp blogs


Please add the following CSS in the style of your blog.


.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

And use the following code to display the video in the post.


<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI">
</video>
</div>


Please change the text ID VIDEO SIMPAN DI SINIwith the code I marked above.


2. For AMP HTML blogs


Please install the following videos to edit the HTML of your blog, if it's already there, then you don't need to install it again.

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

Then please use the following code to display the video in the post.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO ">
  </amp-video>

Please change the text ID VIDEO with the code I marked above. 

Here I do not include the demo, but I have tried the codes above and are running perfectly. 

Please try and hopefully useful.

How to Embed Videos Uploaded on Blogger To Be Responsive



How to Embed Google Drive Videos with HTML5 Video Elements - Previously we already knew how to embed videos uploaded on Blogger to be responsive by using HTML5 video elements. 

Well, this time we will also use the same trick, namely how to embed videos from Google Drive by using HTML5 video elements and of course responsive. 

Why bother using HTML5 video elements, does Google Drive already provide an embed iframe code? Maybe this question is in some Bloggers who often use Google Drive.

As we know that Google Drive has provided an embed code with an iframe, but there are a few that block me especially if it is used to embed videos. Namely, we have to click twice to play the video and there is a link icon to preview the video to Google Drive on the top right of the player which is quite annoying to the player's appearance. 

With HTML5 video elements, we can be easier for custom players for Google Drive videos. 

But to be able to use HTML5 video elements for Google Drive videos, we must use the Google Drive API key for video sources. 

Please create the Google Drive API key with the following steps:

  1. Please log in to the Google API Console
  2. Then please click the Create Project button
  3. After a new project has been successfully created, please select the Google Drive API then click the Enable button.
  4. Then please click the Create Credentials button.
  5. For option Which API are you using? Please select the project that we created earlier. For option Where will you be calling the API from? Please select a Web server (eg node.js, Tomcat). Then check the User Data and click the What credentials do I need?
  6. Then click the Create OAuth client ID button.
  7. Add a Name to Product Name then click the Continue button then click Done.
  8. Then please click on the Create Credentials blue button in the Credentials tab then select API key. Please copy the API key code provided and note it in notepad.

Until here we have succeeded in making the Google Drive API key, then follow the next steps to embed the Google Drive video in the post. 

And here is how to embed videos uploaded on Google Drive to be responsive by using HTML5 video elements.

1. For Non-Amp blogs

Please add the following CSS in the style of your blog. If you have previously saved CSS like this by following the posting on how to embed videos uploaded on Blogger, then please skip this step.

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}


And use the following code to display videos from Google Drive in the post.

<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</video>
</div>

Please change the text FileID with the code from the URL of the Google Drive file share like the following example that I marked and make sure the file is Public on the web.

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Then the article GoogleDriveAPIkey please replace with the Google Drive API key that was created.

2. For AMP HTML blogs

Please install the following videos to edit the HTML of your blog, if it's already there, then you don't need to install it again.

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

Then please use the following code to display the video in the post.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
  </amp-video>

Please change the text FileID with the code from the URL of the Google Drive file share like the following example that I marked and make sure the file is Public on the web.

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Then the article GoogleDriveAPIkey please replace with the Google Drive API key that was created. 

Here I do not include the demo, but I have tried the codes above and are running perfectly. 

Please try and hopefully useful.

How to Embed Google Drive Videos with HTML5 Video Elements



How to Embed the m3u8 File with HTML5 Responsive Video - The m3u8 file is simply an encode file from m3u containing a playlist or playlist for streaming on the internet. Referring to the term streaming, the m3u8 file is often used for online streaming tv, but there are also those who use it for ordinary video streaming. 

To be able to play m3u8 files, HLS (HTTP Live Streaming) is required to download and distribute playlists from m3u8 to a single video streaming unit. 

And to embed the m3u8 file on the website, we can use HTML5 video elements using a plugin that supports HLS.

We can use a plugin that supports free HLS plugin, Fluid Player. With this, we can do custom HTML5 videos. 

If you have an m3u8 file and want to display it on a blog to watch online, please follow the steps below. 

Please save the following code above the code</head>

<script>
//<![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.fluidplayer.com/v2/current/fluidplayer.min.css");
//]]>
</script>
<script src='https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js'/>

Then save the following code again above the code </body>

<script>
//<![CDATA[
fluidPlayer(
    'hls-video',
    {
        layoutControls: {
            fillToContainer: true,
            autoPlay: true
        }
    }
);
//]]>
</script>

If you don't want autoplay, please change true to false for autoPlay.

Add the following CSS in your blog style.

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

Then use the following code in the HTML mode post to display the embed m3u8 file responsively.

<div class="video-responsive">
<video id="hls-video" poster="">
    <source src="file_m3u8" type="application/x-mpegURL"/>
</video>
</div>

Please change the code file_m3u8with the URL hosting your m3u8 file. You can also add background images when loading the player. poster=""

Here I do not include the demo, but I have tried the codes above and run perfectly.

Please try and hopefully useful.

How to Embed m3u8 Files with Responsive Video HTML5

Subscribe Our Newsletter