您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

使用CSS实现嵌入Flash视频自适应长宽

发布时间:2017-05-11编辑:余斗阅读:(0)字号:
    为了嵌入FLASH视频并使其自适应长宽,余斗为所有开发人员准备了一个非常有用的CSS技巧。在我进一步之前,我想引入介绍这个CSS技巧并帮助很多开发者嵌入交互视频的网站。  部分CSS样式代码如下:

    .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video iframe,
    .video object,
    .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
     
    在前端文件中调用方式为:

    <p class="video"><iframe src="http://player.youku.com/embed/XOTI3MjU1MTIw" frameborder="0" allowfullscreen=""></iframe></p>
     
关键字词CSS 视频
余斗余斗
  1. 转载请注明: 使用CSS实现嵌入Flash视频自适应长宽_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2017-05-11最后更新
网页前端输入密码才能访问的实现方法(JS)
CSS3之常用浮出层的写法示例
手机扫一扫 随身带着看
鸿运国际手机登录首页