For this tutorial, I will demonstrate how you can add a very simple MP4 player inside your blogger website. You can add it on your blog posts or pages.

How to Add Simple MP4 Player on Blogger

But first, what is MP4? As I searched the net, I have found out that mp4 really comes from the word (or phrase maybe) "MPEG-4 Part 14". Many movies our even simple music videos have the mp4 file extensions. Most of the Youtube videos are also made up of mp4 files when you download a video from there.

So, what are the main reasons why you wanna put a MP4 player inside your blogger website? Maybe:

1. You wanna embed a mp4 video on your blog.
2. You wanna have an original mp4 player.
3. You have a direct link of a mp4 video and you wanna play it inside your own player.
4. You are hosting your own video website using blogger platform.

Well, whatever reasons that you may have, all you need to do now is just follow the instructions below to be able to have your own mp4 player directly inside your blogspot.

NEEDED:

a. A Gmail account
b. A blogger account
c. mp4 video link (I will provide)
d. mp4 player (I will also provide)

STEPS:

1. Register first a Gmail account. You can register in your own, just visit gmail.com. (Note: If you already have a blogger account, skip this step and go to step 6 already)

2. After registering, go to blogger.com and there, use your registered Gmail account login and password to be able to register and have a blogger account.

3. Now, when you already have your blogger account. Login to access the blogger platform. Click the "Create New Blog" button to continue.

 4. For the Title, type Sample MP4 Player, for Address type samplemp4player.blogspot.com, for the Theme select "Simple". After that click the "Create blog!" button.


5. Now, click the "New Post" button to continue.


6. For the Post Title type Nature Video. Now switch from Compose to HTML. After switching copy and paste the code below inside the big white area (see image below). After pasting, click the "Publish" button.

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
 preload="auto" width="100%" height="480" poster="MY_VIDEO_POSTER.jpg"
 data-setup="{}">
 <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
 <source src="MY_VIDEO.webm" type='video/webm'>
</video>

Values that you can change:
  • width="100%" - changes the width of the mp4 player
  • height="480" changes the height of the mp4 player
  • src="https://vjs.zencdn.net/v/oceans.mp4" - change this mp4 link if you wanted to place your own mp4 video
  • poster="MY_VIDEO_POSTER.jpg" - change MY_VIDEO_POSTER.jpg with your own poster image link, this will serve as the preview of your mp4 video.

7. After Publishing your article/post. Click the "View" link to view your article.


8. Once the mp4 player is loaded, just click the play button to play your video.


9. If successful, you now have your own video playing inside your own mp4 player right inside your blogger.


See a live example of MP4 player done using the tutorial above, just click the play button to watch the video below.