title: Want to hide scrollbar when a absolute div already has a 100% height
body: <p>I am having a client's Html Site Project, Where I used a video in the background of site's homepage, I used a absolute <code>div</code> outside of <code>video</code> with <code>100%</code> <code>height</code> and <code>width</code>, My Client don't want a scrollbar on y-axis &amp; I also cant use <code>overflow:hidden;</code> property of CSS, may be Client will adds some content in future, I am still confused if i have given 100% height and width to parent element of video then from where the scrollbar is coming when I use bottom:0 poperty with that div then scrollbar won't show but the size of video would be changed, why its happening please help me. Thanks in advance &amp; and forgive me if I could not clear the exact problem which I am getting.</p>
  
  <p>Site URL: <a href="http://trekoholic.com/site/" rel="nofollow">http://trekoholic.com/site/</a></p>
  
  <p>I used <code>body { overflow-y: hidden; }</code> as a temporary basis</p>
  
  <p>CSS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#video-player {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="video-player"&gt;
    &lt;video width="100%" height="100%" loop="" autoplay=""&gt;
      &lt;source type="video/webm" src="Video/eat.webm"&gt;&lt;/source&gt;
    &lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>