CODEWITHSUNDEEP
htmlcssvideoresponsive-designhubspot
Meena joumaa
Meena joumaa

Reputation: 21

How do I shift a video to the right with CSS - for responsiveness?

So this video shows up great for any pages greater than 1080px, but between 768px and 1080px, the video gets cut off. I could make the height smaller so the whole video would show, but ideally I want the video to remain the same size but shift right.

I am doing this on hubspot so it is a background for a template. Any help would be much appreciated!!

Here is the code I have been playing around with:

@media only screen and (min-width:769px) and (max-width: 1080px) {
  .video-container {
    min-width: 100% !important;
    margin: auto 0;
    padding: 0;
    /* transform: translate(-30%,0%);*/
  }
  #background-video {
    /*display: none; */
    margin-right: 0px !important;
    transform: translateX(-50%);
    min-height: 40% !important;
  }
}

@media only screen and (max-width: 768px) {
  #background-video {
    display: none;
  }
  body {
    background: #007be2;
    background-size: 750px 500px;
  }
}
<div class="video-container" style="position: absolute; height: 100vh; width: 100vw; overflow: hidden;">
  <video id="background-video" autoplay loop muted poster="https://f.hubspotusercontent10.net/hubfs/3221062/Current%20Rhonda%20Media/MicrosoftTeams-image%20(1).png" style="width: 80%;
  height: auto;
  min-width: 100%;
  min-height:60%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  right: 50%;
  top: 20%;
  transform: translate(-50%,-50%);
  bottom: 0;
  z-index: -1;">
  <source src="https://f.hubspotusercontent10.net/hubfs/3221062/Current%20Rhonda%20Media/Home%20Page%20Banner%20v2-Final.mp4" type="video/mp4">
  
</video>

Upvotes: 0

Views: 385

Answers (1)

tacoshy
tacoshy

Reputation: 13002

By default the video is an inline-element (even though threted as inline-block). As such you have to convert it to a block-level element with display: block; then you can push it to the right by using margin: 0 0 0 auto;

video {
  margin: 0 0 0 auto;
  display: block;
}


/* for vizualisation purpose only */
video {
  border: 2px solid red;
}
<video>
  <source src="https://temp.media/video/?height=400&width=500&length=10&text=">
</video>

Upvotes: 1

Related Questions