how to make html5 video fit into a banner
<p>am working to add a video in the banner which need to be fit the Full width and Height of the banner. What am doing is follow</p>

<p>Html</p>

<pre><code> &lt;div class="banner"&gt;
  &lt;video&gt;
    &lt;source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
 &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>video {
    display: block;
    width: 100%;
    height: 566px;
    z-index: -100;

}
.banner{
  width: 100%;
  height: 566px;
  background: red;
  overflow: none;

}
</code></pre>

<p>Working fiddle : <a href="http://fiddle.jshell.net/ypL0eym8/2/" rel="nofollow">Fiddle</a></p>

<p>But video is not fit into banner</p>