Video hidden in bottom.. not in the right place.

[s_cristina]

Hi guys :D

I need some help with my video.
I am pretty sure I’m doing something wrong.. just don’t knwo what.
My video is kind of stuck and a part is hidden in the bottom when the window isn’t in fullscreen..
Actually it should be like on this page: http://www.immo17.com/home.html. But instead of an image it has to be this video.
Any Idea why this is happening?

Thanks for help!

PS: Sorry for my english..

s_cristina

[JeroenR]

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

[s_cristina]

Thanks for answering!

Ya.. actually I really don’t want that it scrolls.

But thanks. I will try and If doesn’t work, I will ask again ;P

[s_cristina]

Can I do this responsive background video also with this paddings arround like on this page?

[Author]

Posts