Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Video hidden in bottom.. not in the right place. Reply To: Video hidden in bottom.. not in the right place.

#257067
JeroenR
Participant

I would make the video act responsive according to a solution you can find anywhere.
Wrap the video in a container like this:

<div class="video-container">
  <video src="http://www.immo17.com/images/MadeiraTest.mp4" width="1920" height="1080" 
 autobuffer autoplay loop ></video>
<div>

And then use the styling:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Because of overflow-y: hidden; on both html and body and also on .container2, the video is just partly visible and the page doesn’t scroll.

If you want it to fit in the page without scrolling, I would search for responsive background video’s like here for example: https://codepen.io/zitrusfrisch/pen/vymGI