title: how to make <video></video> tag in div center without video outpouring?
body: <p>it centered my video and placed controls in divs bottom but video outpouring . and in css style sheet it looks like css does not recognizing. cos color is black in stylesheet. i use chrome .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.video_div{
   width:800px;
   height:300px;
   border:1px solid red;
   background-color:blue;
   margin:0 auto;
  }
  video{
   width:100%;
   height:100%;
   object-fit:cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;video&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="video_div"&gt;
  &lt;video controls autoplay loop muted&gt;
  &lt;source src="movie.mp4" type="video/mp4"&gt;
  &lt;source src="movie.ogg" type="video/ogg"&gt;
  Your browser does not support the video tag.
  &lt;/video&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>