title: I get a blank screen while using HTML5 video player with JS when CSS is attached
body: <p>I would like to show some video clips randomly on the screen, once at a time.
  The site is working perfectly when I don't link any style sheets, including fonts but as soon as I link something video player goes blank even though source video is there.</p>
  
  <p>Here's my code:
  <a href="https://codepen.io/ondersumer07/pen/poJVdVp" rel="nofollow noreferrer">https://codepen.io/ondersumer07/pen/poJVdVp</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Vinematik&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,700&amp;display=swap" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="grid-container"&gt;
      &lt;h1 class="grid-header"&gt;Vinematik&lt;/h1&gt;
  
      &lt;div class="vid"&gt;
  
  
  
        &lt;video class="grid-video" height="720" width="1280" controls&gt;
          &lt;source id="vsrc" /&gt;
          Please update your browser.
        &lt;/video&gt;
  
  
      &lt;/div&gt;
  
      &lt;p class="grid-p"&gt;&lt;i&gt;Aykut Elmas&lt;/i&gt; vine testi&lt;/p&gt;
    &lt;/div&gt;
  
  
    &lt;script&gt;
      document.getElementById("vsrc").src = Math.floor((Math.random() * 3) + 1) + ".mp4";
    &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Note:I take the videos from a folder, locally. They are named 1.mp4, 2.mp4, etc.</p>