title: play/pause icon on video video tag
body: <p>I want to display <code>&lt;i class="fa fa-play fa-5x"&gt;&lt;/i&gt;</code>before video is played and  <code>&lt;i class="fa fa-pause fa-5x"&gt;&lt;/i&gt;</code> when the video is paused.</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>var video = document.getElementsByClassName('vid');
  video.addEventListener('click', function() {
    video.play();
  }, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video width="85%" height="auto" class="vid" poster="image/video1.jpg" onclick="this.paused?this.play():this.pause();"&gt;
    &lt;source src="video2.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I achieve the above?</p>