Want to hide scrollbar when a absolute div already has a 100% height

1.4k views Asked by At

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 div outside of video with 100% height and width, My Client don't want a scrollbar on y-axis & I also cant use overflow:hidden; 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 & and forgive me if I could not clear the exact problem which I am getting.

Site URL: http://trekoholic.com/site/

I used body { overflow-y: hidden; } as a temporary basis

CSS and HTML:

div#video-player {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
<div id="video-player">
  <video width="100%" height="100%" loop="" autoplay="">
    <source type="video/webm" src="Video/eat.webm"></source>
  </video>
</div>

1

There are 1 answers

1
Yandy_Viera On BEST ANSWER

you have to change

div#video-player {
   position: absolute;
}

by

div#video-player {
   position: fixed;
}

it works but has a counter, if the video has the largest height to the height of the bottom of the screen will not see, but if I understood correctly, this is desired, even in the future will allow you to add more content and will be seen without problems

if you want the full video display just add height: 100% to div#video-player

div#video-player {
   position: fixed;
   height: 100%;
}

the counter, if the video has different proportions than the screen may not fill the entire width

so I really hope this helps