<div>元素是HTML中最基礎(chǔ)的塊級元素之一，用來創(chuàng)建一個獨立的容器。而其中的<video>元素則是HTML5新增的用于嵌入視頻內(nèi)容的標簽。通過將<video>元素放入<div>元素中，可以實現(xiàn)對視頻播放器進行樣式和布局的控制。本文將通過幾個代碼案例詳細解釋如何使用<div>元素來創(chuàng)建滿屏視頻的效果。
在開始之前，先來了解一下如何使用<div>元素包裹<video>元素。，在HTML中添加一個<div>元素，然后在其中添加一個<video>元素。接下來，可以通過CSS來控制<div>元素的樣式和尺寸，以實現(xiàn)滿屏效果。下面將通過幾個實例來演示具體實現(xiàn)方式。
實例一： HTML代碼：

<p>\<div class="full-screen">\n  \<video src="video.mp4" controls></video>\n</div></p>

CSS代碼：

<p>.full-screen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}</p>

在上面的實例中，通過給<div>元素添加了一個名為"full-screen"的類，然后使用CSS的position屬性將其定位為固定位置。接著，設(shè)置了寬度和高度為100%，使其占滿整個屏幕。通過這些樣式設(shè)置，<div>元素將覆蓋整個屏幕，并且<video>元素也會相應(yīng)地填充到<div>元素的大小，從而實現(xiàn)了滿屏的效果。
實例二： HTML代碼：

<p>\<div class="full-screen">\n  \<video src="video.mp4" controls></video>\n</div></p>

CSS代碼：

<p>.full-screen {\n  width: 100vw;\n  height: 100vh;\n}</p>

在這個實例中，使用了CSS的視窗單位vw和vh來設(shè)置<div>元素的尺寸。vw表示相對于視窗寬度的百分比，vh表示相對于視窗高度的百分比。因此，將寬度和高度都設(shè)置為100vw和100vh，可以實現(xiàn)將<div>元素填充滿整個屏幕的效果。同樣地，<video>元素也會相應(yīng)地填充到<div>元素的大小。
通過以上兩個實例的演示，我們可以看到應(yīng)用<div>元素將<video>元素包裹起來可以實現(xiàn)滿屏視頻的效果，并且可以通過CSS來進行樣式和布局的調(diào)整。通過靈活運用不同的CSS屬性和值，我們可以實現(xiàn)更多種類的滿屏視頻效果。如果你對此感興趣，不妨嘗試一下吧！</div>