响应式视频网站html,响应式 Web 设计 – 视频(Video)

响应式 Web 设计 - 视频(Video)

使用 width 属性

如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例：

实例

html>

video {

width: 100%;

height: auto;

}

Your browser does not support HTML5 video.

调整浏览器窗口大小查看视频播放器变化

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意在以上实例中，视频播放器根据屏幕大小自动调整比例，且可以比原始尺寸大。更多情况下我们可以使用 max-width 属性来替代。

使用 max-width 属性

如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：

实例

html>

video {

max-width: 100%;

height: auto;

}

Your browser does not support HTML5 video.

调整浏览器窗口大小，在宽度小于 400px 时，查看视频播放器的变化。

运行实例 »

点击 "运行实例" 按钮查看在线实例

在网页中添加视频

我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域：

实例

html>

* {

box-sizing: border-box;

}

video {

width: 100%;

height: auto;

}

.row:after {

content: "";

clear: both;

display: block;

}

[class*="col-"] {

float: left;

padding: 15px;

width: 100%;

}

@media only screen and (min-width: 600px) {

.col-s-12 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

html {

font-family: "Lucida Sans", sans-serif;

}

.header {

background-color: #9933cc;

color: #ffffff;

padding: 15px;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color :#33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

background-color: #0099cc;

}

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}

Chania

• The Flight
• The City
• The Island
• The Food

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

Your browser does not support HTML5 video.

What?

Chania is a city on the island of Crete.

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

运行实例 »

点击 "运行实例" 按钮查看在线实例