Q: Filling div with video tag I have broken up my page into 4 quadrants using viewheight and % widths. This works well.
I now wish to fill each div with a , that can responsively fill it's parent div. Assigning width: 100% to the video kinda works but appears to go a bit screwy and doesn't respect my media queries that should collapse the content (this works fine for anything except ).
Also, I cannot get the video to use the maximum height of the video. The videos I have are in 16:9 whereas the divs are at a different ratio. If the videos need to zoom to fill that would be fine, but I'm unsure how to achieve this.
Thanks for any help
<!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>


A: Working with the little amount of information (no html provided), I would suggest you to try working with this: min-height: 50vh; min-width: 50vw. 
