video 視頻大小與手機

Question

想問一下這個
https://www.spectacles.com/
最下面的那個視頻
他可以融合所有螢幕且一樣大
手機看時也可以高度和寬度跟手機大小一樣 但是視頻不會變形....
請問這該怎麼做？

#cover3
{
 width:100%;
 height:100%;
}
#cover3 video
{
 width: 100vw;
 height: 100%;
}

<div class="cover" id="cover3">
<video preload="auto" muted="" playsinline="" autoplay="" loop="">
<source src="cover.mp4" type="video/mp4"> 
  </video>
</div>

Answer 1

谢邀，这种布局，其实是一个宽高等比例缩放布局的问题。

父元素宽高等比例，子元素就是video标签，width和height都100%。

先占坑，来给你写个demo

---

更新一下，发现原来才是整屏铺满的效果
整屏的效果
https://jsfiddle.net/temz7qj7/1/

Answer 2

谢邀~

如图明白了吗

最下方视频

同样的道理~
视频的大小不能控制, 但是前端工程师需要做的是展示给用户的界面的处理~