html5 video does not play in full screen

Recently, the project used html5 video video playback. But the video in our div is actually full left and right, centered up and down.
This effect is shown in the figure: it is
Insert picture description here
ugly. The effect is not good. Full of entanglement.
What to do. We solve it through css style

		<div class="spoy" >
				<!-- 合作伙伴1y -->
						  <video class ="video"  loop="loop" autoplay="autoplay" controls>
			          <source src="mov_bbb.mp4" type="video/mp4">
			          <source src="mov_bbb.ogg" type="video/ogg">
			          Your browser does not support HTML5 video.
			        </video>
				</div>

	.video{
    
    width: 100% ;height: 100%; object-fit: fill;}

Insert picture description here

Insert picture description here
The attribute of the loop above is to automatically play video video

Here we usedobject-fit （image,video）自适应

替换元素
        其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
        CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
为何需要object-position/object-fit?
        适配响应式布局

.fill {
    
     object-fit: fill; }
.contain {
    
     object-fit: contain; }
.cover {
    
     object-fit: cover; }
.none {
    
     object-fit: none; }
.scale-down {
    
     object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

The inspired code is as follows:

h2 {
    
    
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}
 
div {
    
    
  width:302px;
  height:202px;
  border:1px solid #000;
}
 
.narrow {
    
    
  width: 100px;
  height: 150px;
  margin-top: 10px;
}
 
.fill {
    
    
  object-fit:fill;
}
 
img{
    
    
  width:100%;
  height:100%;
}
 
.contain {
    
    
  object-fit: contain;
}
 
.cover {
    
    
  object-fit: cover;
}
 
.none {
    
    
  object-fit: none;
}
 
.scale-down {
    
    
  object-fit: scale-down;
}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="object-fit.css">
</head>
<body>
<div>
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1526212574&di=d7da79bec27769a727d6dbc7c4668d4d&src=http://img1.cache.netease.com/catchpic/C/C7/C7F6DDD628AF0834C677072B06BBE2C8.jpg" alt="MDN Logo" 
	class="contain"/>
</div>
</body>
</html>

html5 video does not play in full screen

Guess you like