CODEWITHSUNDEEP
htmlcss
Evaldas Stankunas
Evaldas Stankunas

Reputation: 45

how to make <video></video> 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 use chrome .

div.video_div{
	width:800px;
	height:300px;
	border:1px solid red;
	background-color:blue;
	margin:0 auto;
}
video{
	width:100%;
	height:100%;
	object-fit:cover;
}
<!DOCTYPE html>
<html>
<head>
<title>video</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="video_div">
<video controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>

Upvotes: 0

Views: 2150

Answers (1)

HRoll
HRoll

Reputation: 36

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/

Upvotes: 2

Related Questions