title: How to make HTML5 video fade in when it has finished loading?
body: <p>I'm trying to have my HTML5 video element fade in when it loads, (I'm currently having it appear using Javascript <code>canplaythrough</code> as you can see in the code you see below, but it's a little harsh.) How can I get the HTML5 video element to fade in gently? I'm OK with JavaScript or jquery, but I don't know either one very well, so some complete code would be very helpful!</p>
  
  <p>Here's the code: (if you run the code with the Run Code Snippet, it doesn't work well, so I highly suggest to go to my website, it's on is my video page here and works if you wait a 30 seconds/minute (until the video loads): <a href="http://www.jeffarries.com/videos" rel="noreferrer">jeffarries.com/videos</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  var e = document.getElementById("myVideo");
  e.style.display = 'none'
  
  var vid = document.getElementById("myVideo");
  vid.oncanplaythrough = function() {
      var e = document.getElementById("myVideo");
         e.style.display = 'block'
  };
  
  &lt;/script&gt; </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video style="display: block;" id="myVideo" width="320" height="176" controls&gt;
    &lt;source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4"&gt;
    Your browser does not support HTML5 video.
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for you time and effort!</p>