Skip to content Skip to sidebar Skip to footer

How To Make Tag In Div Center Without Video Outpouring?

it centered my video and placed controls in divs bottom but video outpouring . and in css style sheet it looks like css does not recognizing. cos color is black in stylesheet. i us

Solution 1:

Try adding the rule overflow: hidden; to your div.video_div rule:

div.video_div{
    width:800px;
    height:300px;
    border:1px solid red;
    background-color:blue;
    margin:0 auto;
    overflow: hidden; /* Add this */
}
video{
    width:100%;
    height:100%;
    /* Use contain instead if you want the object to fit without cropping */object-fit: cover; 
}

The object-fit: cover attribute will scale the video, preserving aspect. This can leave part of it overflowing over the boundaries. The overflow: hidden CSS on the surrounding div hides this overflow. You might also want to use object-fit: contain instead, which will preserve aspect ratio, but make the video completely fit inside the box. (You can check out https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit to see the various values.)

Example jsfiddle with a working video source: https://jsfiddle.net/gmg43wb2/

Post a Comment for "How To Make Tag In Div Center Without Video Outpouring?"