How to Put Responsive HTML5 Mp4 Video

 

Welcome back In the previous article, I mentioned the key to embedding an Iframe video, while in this article I will show You all know how to put a video as an .mp4 file.

1. Go to Theme => Edit HTML and copy the following code from above </head>

<style type="text/css">

#video-player{position:relative;overflow:hidden;width:100%;height:100%;border-radius:5px}

.video-container{border:4px solid #ff0000}

.video-responsive{position:relative;overflow:hidden;width:100%;height:100%;padding-top:56.25%;background-color:rgb(0,0,0)}

.video-responsive video{position:absolute;top:0;left:0;width:100%;height:100%}

</style>

2. Copy the following code from above </body>, then click the Save Icon and leave the Edit HTML tab.

<script type="text/javascript">

$('#video-player').each(function () {

    let $this = $(this),

        zeroIndex = 0,

        buildVideo = "";

    buildVideo += '<div class="video-container">';

    buildVideo += '<div class="video-responsive">';

    buildVideo += '<video class="video-mp4" width="100%" height="100%" controls playsinline webkit-playsinline>';

    buildVideo += '<source src="' + sourceFile[zeroIndex] + '" type="video/mp4">';

    buildVideo += '</video>';

    buildVideo += '</div></div>';

    $this.html(buildVideo);

});

</script>

3. Copy the following code into the Blog Post by converting to HTML view

<div id="video-player"></div>

<script>

let sourceFile = ["https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"];

</script>

4. Change the Link Video .mp4 above and click Publish.