如果让嵌入的视频实现响应式

日期:2016-06-07 点击:

让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站,我决定把重点放在 Nick La 的弹性视频技术,这种技术可让您嵌入的响应式的视频。

  HTML:

1
2
3
<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

  

  CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.video-container {
    positionrelative;
    padding-bottom56.25%;
    padding-top30px;
    height0;
    overflowhidden;
}
 
.video-container iframe, 
.video-container object, 
.video-container embed {
    positionabsolute;
    top0;
    left0;
    width100%;
    height100%;
}

  在你的网站上应用了这些代码后,嵌入的视频也是响应式(Responsive)的了。

推荐动态

最新动态

LATEST NEWS

填写您的项目需求给我们。

*请认真填写需求信息,我们会在24小时内与您取得联系。

启邦互动

品牌官网设计|网站建设|网站设计

深圳·龙岗区

大芬油画村黄江广场2楼202

电话:0755-2868 4353

邮箱:service@sz-qibang.com

© 2017深圳市启邦互动科技有限公司 版权所有 粤ICP备13054229号-1 网站地图     付款方式