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/