CODEWITHSUNDEEP
htmlcssvideobackground
Piero Cini
Piero Cini

Reputation: 41

allign center video background in a smaller div/container

I'm trying to center a video background in a smaller div/container. an example of what exactly I'm looking for is here(the video with the bike). the video is centered to the container so it cut some right and some left. how I can do it?? thanks

I tried this code but don't work well.. as I tell up there, I need that video in contained and centered into the div, so it will be cut to left and right, exactly like the example I show you.

thanks to everyone who will help me!

.video-backgroud {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  }
      <div class="gridvideo" itemprop="video">
        <video class="video-background" preload="auto" loop="" autoplay="" muted="" poster="http://tommasoottomano.com/wp-content/uploads/2017/07/back-sito-ok-copia-1.png" data-vps-id="0ccff4a1-e9d1-d6a7-f2af-836828e2b1b3" data-vps-speed="1">
          <source src="http://tommasoottomano.com/wp-content/uploads/2017/07/HOV_chapter-one_The-rule-of-Nature-sito.mp4" type="video/mp4">
        </video>
      </div>

Upvotes: 2

Views: 376

Answers (2)

Rahul Das
Rahul Das

Reputation: 172

Replace your css with this:

         .gridvideo{
              display:block;
              position: absolute; 
              padding: 15px 10px;
            } 
             .video-backgroud {
            display: block;
            position: relative;
            }

You can control the gap between your div and your video by changing the padding in .gridvideo

Upvotes: 1

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Please try this below code.

I have just added margin: 0px auto; to video.video-background class. so using margin:0px auto it will set video in center of the screen.

video.video-background {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0px auto; // added this property as new
  }

If video container is still not center using above class then please added class.

.gridvideo{display:block;} // Here you can set display:flex

Hope this helps.

Upvotes: 0

Related Questions