Such a problem: the background of the site should be a video, the height of which is 870 pixels, a picture is glued to the bottom, which is a static continuation of the video and matches pixel to pixel. The problem is how to make it so that when the screen is narrowed down, the background does not decrease, but is centered, as it were. in the center of the vidos there is an object that should remain in the center, but not resized. I tried min-width, but by its reach the content of the site ceases to narrow and a scroll appears that is not needed. I feel that the solution to this problem is somewhere on the surface, but we are already reworking this project for a long time and I’ve got something confused ((I’m using foundation 6. Thank you in advance) Here’s the markup:

<div class="background"> <div class="video1" id="vid"> <video autoplay poster="/assets/imgs/bg2.jpg" id="bgvid" loop> <source src="assets/video/earth3.mp4" type="video/mp4"> </video> </div> <div class="bottom"> <div ui-view="header" id="header"></div> <div class="row" ui-view="middle"> <div class="large-2 columns show-for-large aside"> <div ui-view="aside"></div> </div> <div class="large-10 columns container"> <div ui-view="content" class="row"></div> </div> </div> <div ui-view="footer"></div> </div> </div>

Here are the styles:

 .bottom { background-image: url(/assets/imgs/bottom_video.jpg); background-repeat: repeat-y; background-size: 100%; height: 100%; width: 100%; } .background { display: flex; margin: 0 auto; flex-direction: column; position: absolute; width: 100%; } .video1 { display: flex; } video { width: 100%; height: 100%; }

Here is the codepan: codepen.io/foxer1/pen/XKNaRe?editors=1100

Now everything is resized proportionally and the border between the video and the picture is not visible, but I do not need the video to decrease

    1 answer 1

     background-position: center center;
    • If everything was so simple ... with the video it does not roll .. - foxer
    • I tried to do this on video: - foxer
    • video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX (-50%) translateY (-50%); } - foxer
    • the video turns out to be centered, but when I hang it on a div with a picture under the video, the content is leaving .. - foxer
    • So this should be a video? Then forgive me, confused - leon0399