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

收藏 分享

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

这样就可以了!


鲜花

握手

雷人

路过

鸡蛋

讨论群

QQ客服:
关注我们 :
Copyright © 2016 . All Rights Reserved 优站网-网站模板,bootstrap模板,帝国cms模板,织梦模板,精品网站模板素材下载共享平台 桂ICP备13006414号-7
最佳分辨率1280*800,建议使用Chrome、Firefox、Safari、ie10版本浏览器。本站分享的所有模板及素材仅供学习研究之用,请勿用于商业用途,否则后果自负。