現在隨著移動互聯網的發展，手機視頻的普及率越來越高，視頻的響應式布局也成為了前端開發的日常工作之一。在CSS3中，我們可以使用媒體查詢來實現響應式的布局。

/* 在大于等于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;
}

在上面的示例中，我們使用了兩個媒體查詢分別針對大屏和小屏來設置視頻容器的寬高。我們還使用了一個比例padding-bottom來設置高度，在響應式的情況下，高度會自動適應。

在實際開發過程中，我們還可以通過JS來實現更加復雜的視頻控制，比如播放、暫停、音量、全屏等等。