欢迎来到墨鱼博客!
如何使用CSS实现嵌入FLASH视频自适应长宽

如何使用CSS实现嵌入FLASH视频自适应长宽

浏览次数:

作者: admin

信息来源:

更新日期: 2015-02-11 21:41:14

文章简介

为了嵌入FLASH视频并使其自适应长宽,我们为所有开发人员准备了一个非常有用的CSS技巧。在我进一步之前,我想引入介绍这个CSS技巧并帮助很多开发者嵌入交互视频的网站。部分CSS

  • 正文开始
  • 相关文章

为了嵌入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%;
}

如何应用到模板?

把上面的CSS放到模板的主CSS里面,比如CSS最后!

然后后台发布视频编辑器里HTML部分为

<p class="video"><iframe src="http://player.youku.com/embed/XOTI3MjU1MTIw" frameborder="0" allowfullscreen=""></iframe></p>

这样就可以了!

如何使用CSS实现嵌入FLASH视频自适应长宽.doc

PS.由于前期整理文章没有进行格式化信息处理,导致有些包含代码修改的信息,格式混乱看不清楚。如果发现有此类问题,请在下方评论留言,墨鱼第一时间进行格式化整理!感谢配合

转载请注明: 帝国模板 » 如何使用CSS实现嵌入FLASH视频自适应长宽

标签:
收藏此文 感觉不错,赞哦! () 打赏本站

如本文对您有帮助,就请墨鱼抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
墨鱼部落格帝国CMS整站源码模板内容页播放视频的一般解决方案!
« 上一篇 2015年02月08日
帝国CMS一个字段两个变量的实现方法!PHP分割法!
下一篇 » 2015年04月07日

精彩评论