JSFiddle - React, Tailwind, and code Playground

HTML

<p>When explicitly hiding the controls, all controls should be hidden, even the Chromecast icon</p>          

<h3>Without native controls</h3> 
<div><button id="playpause">play</button></div><br/>

<video id="video1" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">

      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>

          <h3>With native controls </h3>          
<video controls id="video2" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">

      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>

CSS

video {
    width: 75%;
}

video::-internal-media-controls-overlay-cast-button {
    display: none;
}

JavaScript

var btn = document.getElementById("playpause");
var v1 = document.getElementById("video1");

btn.onclick = function() {
    if (v1.paused) {
        v1.play();
        btn.innerHTML = "pause";
    } else {
        v1.pause();
        btn.innerHTML = "play";
    }
}