CODEWITHSUNDEEP
htmlcss
Max Lynn
Max Lynn

Reputation: 1778

How to stop a video tag overflowing its container div.

What I need is part of this video to be hidden if its over the containers height.

I thought that overflow hidden would be the solution here but somehow it doesn't seem to want to listen.

code: 

body,
html,
.container,
#video-background {
    height: 100%;
    margin: 0;
    padding: 0;    
}

html {
    overflow-x:hidden;
}

#video-background {
    min-width: 100%;
    min-height: 100%;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 

    width: 100%;
    height: 100%;    

}

@media (min-aspect-ratio: 16/9) {
  #video-background {
    width: 100%;
    height: auto; /* actually taller than viewport */
   }
}
@media (max-aspect-ratio: 16/9) {
   #video-background {
     width: auto; /* actually wider than viewport */
     height: 100%;
   }
}

Here is my JSfiddle 

https://jsfiddle.net/dqbq29ru/3/

Also it would be worth finding out or mentioning in comments if you've had problems with the video element in ie9 or up.

Many thanks

Upvotes: 10

Views: 6102

Answers (1)

Max Lynn
Max Lynn

Reputation: 1778

The answer to this question is that the position absolute on the video tag prevents the use of overflow hidden.

So I removed this from the video tag as it was not needed in the end and added an overflow hidden to the container.

Thanks

Upvotes: 9

Related Questions