澳门新濠影汇登录[官方网站]

澳门新濠影汇登录,professional供给集团官网网站制作,网站策划,建网站效劳

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

日期: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)的了。



Tag:视频响应式 | iframe响应式 |

推荐消息

最新消息

LATEST NEWS

填写您的网站建造需求给吾们。

*请认真填写需求信息,吾们会在24钟点内与您取得联系。

澳门新濠影汇登录

professional供给深圳集团官网网站建造、定制策划

深圳市龙华新区

东边牛逼商用大楼3066

电话:0755-2868 4353

邮箱:service@sz-qibang.com

  • 深圳网站建造 | 网站建造案例 | 网站建造分享 | 深圳网站建造集团官网 | 网站建造报价咨询 | 深圳网站建造集团官网联系方式

    Copyright ?2019 澳门新濠影汇登录 版权一切 广ICP备13054229号-1 网站地图 会帐方式

XML 地图 | Sitemap 地图