用视频标签填充div

我已经使用viewheight和％widths将我的页面分成4个象限。这很好。用视频标签填充div

我现在希望用a填充每个div，可以响应地填充它的父div。指定宽度：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>

来源

2015-11-02 user1496093

总是显示相关的代码。已添加代码 –

与所述信息的少量（不提供HTML）工作，我建议你尝试与该工作：min-height: 50vh; min-width: 50vw。

来源

2015-11-02 15:26:44

。该视频是352x196 btw。 – user1496093

使用：视频{\t宽度：100％;高度：100％; object-fit：包含; \t}尊重父div的宽度，但纵横比保持不变，这不是我想要的。 – user1496093

用视频标签填充div

回答

相关问题