CSS116是一款功能強大的CSS框架,可以輕松創建漂亮的網頁。其中重要的一部分是視頻的支持,下面介紹如何使用CSS116來設置視頻。
.video-container { position: relative; padding-bottom: 56.25%; /* 16:9視頻比例 */ height: 0; overflow: hidden; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
要創建一個帶有視頻的容器,我們使用.video-container類。這個類使用相對定位和固定的寬高比來創建一個可響應的容器。.video類用于設置視頻的寬高。
<div class="video-container">
<video class="video" src="video.mp4" controls></video>
</div>
在HTML中,我們將視頻元素放在.video-container容器內,并且使用src屬性設置視頻的路徑。通過設置controls屬性,可以顯示默認的播放控件。
這是CSS116中設置視頻的基本方法。您可以根據需要進行更改和調整,以便符合您的項目需求。使用CSS116可以輕松地創建具有響應性的網頁,使視頻內容更具吸引力和易用性。
上一篇css12邊框屬性