Search code examples
cssviewport

Video CSS issue with mobile devices

I am wrapping a video with this code: 

 .row-full {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  height: 780px;
  margin-top: 0px;
  margin-bottom: 0px;
  left: 50%;

}

I can use 100vw for the width but I need to use the exact height for displaying the video correctly. THe problem is that on mobile devices the width resizes but the height stays the same. Is there a way to resize the height without using @media screen? The URL where you can see the problem is the following: Link to example

Solution

  • You can try this: 

    height: auto;

    or Remove this from your code:

    height: 780px;