css - video 視頻大小與手機

Question

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

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

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

Answer 1

謝邀，這種佈局，其實是一個寬高等比例縮放佈局的問題。

父元素寬高等比例，子元素就是video標籤，width和height都100%。

先佔坑，來寫個demo

---

更新一下，發現原來是整屏鋪滿的效果
整屏的效果
https://jsfiddle.net/temz7qj7/1/

Answer 2

謝邀~

如圖明白了嗎

最下方影片

同樣的道理~
影片的大小無法控制, 但是前端工程師需要做的是展示給使用者的介面的處理~