Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop a video tag overflowing its container div.

Tags:

html

css

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

like image 395
Max Lynn Avatar asked Aug 21 '15 13:08

Max Lynn


People also ask

How do I stop div text from overflowing?

To fix this problem, avoid using vw for your max-width and use a max-width of 100% instead. This will transfer the width of the parent container to the width of the child container.

How do I stop DIVS from expanding?

Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).

Why is content overflowing the div?

Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.

How do you clip the overflowing content from an HTML element?

Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead. As of Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal , and -moz-scrollbars-vertical are behind a feature preference setting.


1 Answers

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

like image 68
Max Lynn Avatar answered Sep 17 '22 13:09

Max Lynn