How to add Fluid player (free) in Blogger website - HTML 5 video player

 

 Fluid player:

Fluid Player, the free, open-source, HTML5 video player has been updated to version 3. The player has undergone a major modernization of the codebase significantly improving code quality and improving the player stability. More than 60 bugs and issues were fixed in version 3 improving compatibility, responsiveness and rendering of the player. 

Why to add Video player in Blogger:

Video players are added to blogger website to avoid upside load, decrease loading time, avoid brudcums errors and good user experience

Embedding a video with video players make website lightweight which  enables good customer satisfaction.

How to add Fluid player in Blogger:

Steps:

1. Visit Fluid player official website.

2. Build the Video player in Video builder.

3. Customize your Video player.

4. Then,copy the codes.

5. Log in to your blog.

6. Create a new post.

7. Switch to HTML view.

8. Paste the codes 

9. Add your Video URL

10. Save and publish.

Example:

Codes:

<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

<video id="video-id"><source src="Your video.mp4" type="video/mp4" />

<script>

    var myFP = fluidPlayer(

        'video-id', {

"layoutControls": {

"controlBar": {

"autoHideTimeout": 3,

"animated": true,

"autoHide": true

},

"htmlOnPauseBlock": {

"html": null,

"height": null,

"width": null

},

"autoPlay": false,

"mute": true,

"allowTheatre": true,

"playPauseAnimation": true,

"playbackRateEnabled": true,

"allowDownload": true,

"playButtonShowing": true,

"fillToContainer": false,

"posterImage": ""

},

"vastOptions": {

"adList": [],

"adCTAText": false,

"adCTATextPosition": ""

}

})

</script>

Here how the video looks: