HTML5 Video - Remove controls, Mute audio (for Chrome), autoplay inline for ios, onplaying for Safari controls, Bootstrap Glyphicons for icons

HTML5 Video snippet + Buttons

<video id="myVideo" muted autoplay loop playsinline onplaying="this.controls=false" poster="/images/my-image.jpg" style="pointer-events: none;">
  <source src="/path/to/files/video.mp4">
  Your browser does not support the video tag.
</video>
<div class="fpButtons">
<button class="btn btn-default btn-sm pause" type="button" >
  <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
</button>
<button class="btn btn-default btn-sm play" type="button" style="display:none;">
  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</div>


**Real example used on ucsb.edu homepage on May 26, 2020 **
<div class="hero-video">
                          <video id="fpVideo" muted="" autoplay="" loop="" playsinline="" onplaying="this.controls=false" poster="/web/20200526064532im_/https://www.ucsb.edu/sites/default/files/images/home/UC-Santa-Barbara-Henley-Gate-Hero-700.jpg" style="pointer-events: none;" controls="">
  <source src="/web/20200526064532im_/https://www.ucsb.edu/sites/default/files/images/videos/Campus%20Experience%20v7-1.mp4">
  Your browser does not support the video tag.
</video>
<div class="fpButtons">
<button class="btn btn-default btn-sm pause" type="button" style="display: none;">
  <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
</button>
<button class="btn btn-default btn-sm play" type="button" style="">
  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</div>
                      </div>

Reference: https://stackoverflow.com/a/21013981