現(xiàn)在隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，手機(jī)視頻的普及率越來(lái)越高，視頻的響應(yīng)式布局也成為了前端開(kāi)發(fā)的日常工作之一。在CSS3中，我們可以使用媒體查詢(xún)來(lái)實(shí)現(xiàn)響應(yīng)式的布局。

/* 在大于等于768px的屏幕上顯示視頻容器寬度為640px，高度為360px */
@media screen and (min-width: 768px) {
.video-container {
width: 640px;
height: 360px;
}
}
/* 在小于768px的屏幕上顯示視頻容器寬度為100% */
@media screen and (max-width: 767px) {
.video-container {
width: 100%;
}
}
/* 視頻容器的樣式 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
/* 視頻播放器的樣式 */
.video-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 視頻控制面板的樣式 */
.video-control {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}

在上面的示例中，我們使用了兩個(gè)媒體查詢(xún)分別針對(duì)大屏和小屏來(lái)設(shè)置視頻容器的寬高。我們還使用了一個(gè)比例padding-bottom來(lái)設(shè)置高度，在響應(yīng)式的情況下，高度會(huì)自動(dòng)適應(yīng)。

在實(shí)際開(kāi)發(fā)過(guò)程中，我們還可以通過(guò)JS來(lái)實(shí)現(xiàn)更加復(fù)雜的視頻控制，比如播放、暫停、音量、全屏等等。