I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful.
Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignment issues and doesn't behave as expected with media queries intended to collapse the content (this issue is specific to videos).
Additionally, I am struggling to make the video utilize the maximum height of the div. The videos I have are in a 16:9 ratio while the divs are at a different aspect ratio. If the videos need to be zoomed in to fill the space, that would be acceptable, but I'm unsure how to achieve this.
Thank you for any assistance you can provide.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
html, body {
-webkit-font-smoothing: antialiased;
}
.grid__item {
height:49vh;
float:left;
}
.grid__half {
width:50%;
}
.grid__quarter {
width:25%;
}
@media only screen and (min-width: 320px) {
.grid__item {
height:16vh;
background:#fff;
}
.grid__quarter {
width:100%;
}
.grid__half {
width:100%;
}
}
@media only screen and (min-width: 480px) {
.grid__item {
height:32vh;
background:pink;
}
.grid__half {
width:100%;
}
.grid__quarter {
width:25%;
}
video {
top:0;
left:0;
}
}
@media only screen and (min-width : 768px) {
.grid__item {
height:49vh;
background:#fff;
}
.grid__half {
width:50%;
}
.grid__quarter {
width:25%;
}
}
@media only screen and (min-width : 992px) {
.grid__item {
height:49vh;
}
.grid__half {
width:49%;
}
.grid__quarter {
width:25%;
}
}
@media only screen and (min-width : 1200px) {
.grid__item {
height:50vh;
}
.grid__half {
width:50%;
}
.grid__quarter {
width:25%;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="grid__item grid__half" style="">
<video><source src="pong.mp4" type="video/mp4"></video>
</div>
<div class="grid__item grid__half">
b
</div>
</div>
<div class="row">
<div class="grid__item grid__quarter">c</div>
<div class="grid__item grid__quarter">d</div>
<div class="grid__item grid__quarter">e</div>
<div class="grid__item grid__quarter">f</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</body>
</html>