你有没有想过，在网页上嵌入一段视频，能让整个页面瞬间生动起来呢？没错，今天就要来聊聊这个话题——如何用CSS和div巧妙地展示视频。想象你正坐在电脑前，浏览着一个页面，突然一段精彩视频跳了出来，是不是瞬间觉得心情大好？那就让我们一起探索如何用CSS和div让视频在网页上大放异彩吧！
一、选择合适的视频格式
在开始之前，先得了解一下视频格式。目前，网页上常用的视频格式有MP4、WebM和Ogg。其中，MP4格式兼容性最好，几乎所有的浏览器都能支持。所以，建议你选择MP4格式作为视频文件。
二、HTML结构搭建
首先，我们需要在HTML中创建一个div元素，用来承载视频。这个div元素可以设置一个固定的宽度和高度，以便视频能够按照我们的预期展示。
这里，`video`用来嵌入视频，`src`属性指定视频文件的路径，`controls`属性则表示在视频下方显示控制条。
三、CSS样式美化
接下来，我们要用CSS来美化这个视频。首先，给div元素设置一个背景颜色，这样在没有视频播放时，页面看起来也不会那么单调。
```css
.video-container {
width: 640px;
height: 360px;
background-color: 000;
position: relative;
为了让视频居中显示，我们可以给`video`添加一些样式。
```css
video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
这样，视频就会充满整个div元素，并且居中显示。
四、响应式设计
为了让视频在不同设备上都能正常显示，我们需要进行响应式设计。这可以通过媒体查询来实现。
```css
@media (max-width: 768px) {
.video-container {
width: 100%;
height: auto;
当屏幕宽度小于768px时，视频容器宽度变为100%，高度自动调整，从而实现响应式布局。
五、添加播放按钮
有时候，我们可能希望在视频加载时显示一个播放按钮。这可以通过CSS和JavaScript来实现。
首先，在HTML中添加一个按钮元素。
用CSS设置按钮样式。
```css
play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
用JavaScript为按钮添加点击事件。
```javascript
document.getElementById('play-btn').addEventListener('click', function() {
var video = document.querySelector('.video-container video');
video.play();
这样，点击按钮后，视频就会开始播放。
通过以上步骤，我们就可以在网页上用CSS和div展示一段视频了。当然，这只是基础操作，你还可以根据自己的需求进行更多创意设计。比如，添加视频封面、控制视频播放进度、实现视频循环播放等。希望这篇文章能给你带来一些启发，让你的网页更加生动有趣！