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

ありがとう。このレイアウトは実際には、幅と高さに比例してレイアウトを拡大縮小する問題です。

親要素の幅と高さは比例しており、子要素は幅と高さの両方が 100% の video タグです。

まず機会を捉えてデモを作成してください

---

更新したところ、画面全体を埋める効果であることが判明しました
画面全体の効果
https://jsfiddle.net/temz7qj7/1/

Answer 2

ご招待ありがとうございます~

この写真わかりますか

ビデオは下部にあります

同じ原理です~
ビデオのサイズは制御できませんが、フロントエンドエンジニアがしなければならないことは、ユーザーに表示されるインターフェースを処理することです~