I have a layout like this:
body {
color: white;
height: 100%;
width: 100%;
background: red;
}
#interaktiivne-container {
height: 100%;
width: 100%;
overflow: hidden;
background: blue;
}
#interaktiivne-videowrapper:after {
height: 0;
overflow: hidden;
padding-top: 56.25%;
position: relative;
background-color: brown;
}
#interaktiivne-videowrapper>div {
overflow: hidden;
background: black;
}
#interaktiivne-videowrapper>div>video {
top: 0;
width: 100%;
height: 100%;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interaktiivne</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="interaktiivne-container">
<div id="interaktiivne-videowrapper">
<div>
<video autoplay src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
</div>
</div>
</div>
</body>
</html>And this gives me the desired width for the video. Problem now is, that in some content cases, I want to resize the video element itself to 200%. but this MUST NOT make the container div's expand and the overflow MUST STAY HIDDEN.. the code currently, sadly does do it, overflow is not hidden :( Any ideas?
