How to put a video-phone in the middle of the page at the reset.



  • Such a problem: the site should be characterized by a video with a height of 870rx, a picture of the site that is a static continuation of the video and coincides with the picsel at the picsel. The problem is how to make the background not diminished when the screen narrows down, but how to be centralized, i.e., there is an object in the center of the view that should remain in the center but not in the centre. I've been through min-width, but when it reaches the content of the site, it stops narrowing down and there comes a scrub that doesn't need. I feel that this task is on the surface somewhere, but this project has been redesigning for a long time, and I'm already confused. Thank you so much. Here's the mark:

    <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>
    
            &lt;div class="row" ui-view="middle"&gt;
                &lt;div class="large-2 columns show-for-large aside"&gt;
                    &lt;div ui-view="aside"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="large-10 columns container"&gt;
                    &lt;div ui-view="content" class="row"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;       
        &lt;div ui-view="footer"&gt;&lt;/div&gt;
    

    </div>
    </div>

    Here's the style:

    .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 codepan:
    codepen.io/foxer1/pen/XKNaRe?editors=1100

    Now, everything's in proportion and the border between the video and the picture is not visible, but I don't need the video to decrease.



  • background-position: center center;
    

Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2