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

Thank you, this layout is actually a problem of scaling the layout in proportion to width and height.

The width and height of the parent element are proportional, and the child element is the video tag, with both width and height 100%.

Seize the opportunity first and write a demo for you

---

Updated it and found that it turned out to be the effect of filling the whole screen
The effect of the whole screen
https://jsfiddle.net/temz7qj7/1/

Answer 2

Thanks for the invitation~

Do you understand the picture?

Video at the bottom

Same reason~
The size of the video cannot be controlled, but what the front-end engineer needs to do is to process the interface displayed to the user~