用视频标签填充 div答案

【问题标题】：Filling div with video tag用视频标签填充 div
【发布时间】：2016-02-02 12:55:32
【问题描述】：

我使用 viewheight 和 % widths 将我的页面分成 4 个象限。这很好用。

我现在希望用填充每个 div，它可以响应地填充它的父 div。将 width: 100% 分配给视频有点工作，但似乎有点麻烦，并且不尊重我应该折叠内容的媒体查询（这适用于除之外的任何内容）。

另外，我无法让视频使用视频的最大高度。我拥有的视频是 16:9，而 div 的比例不同。如果视频需要缩放来填充，那很好，但我不确定如何实现这一点。

感谢您的帮助

<!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>

【问题讨论】：

始终显示相关代码。

标签： css html5-video

【解决方案1】：

使用少量信息（未提供 html），我建议您尝试使用以下内容：min-height: 50vh; min-width: 50vw。

【讨论】：

已添加代码。视频是 352x196 顺便说一句。
使用：视频{宽度：100%；高度：100%；适合对象：包含； } 尊重父 div 的宽度，但保持纵横比，这不是我想要的理想状态。