CSS实现FLASH视频自适应长宽教程

CSS实现FLASH视频自适应长宽教程

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2015-02-11 21:41:14
文章简介

使用CSS实现FLASH视频自适应长宽教程:想让FLASH视频在不同设备上自动调整大小?试试CSS吧!首先,确保FLASH视频嵌入代码正确。然后,为视频容器设置固定宽高比,使用padding-top技巧代替固定高度。接着,通过CSS的`position: relative`和`position: absolute`属性,将FLASH对象定位到容器内。这样,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>

这样就可以了!

jQuery原生实现图片大小调整与排列特效教程
« 上一篇 2014年12月21日
多说自定义CSS教程,背景、按钮、字体调整及隐藏版权方法
下一篇 » 2015年04月09日
  • 自适应网页设计(RWD)基础,概念、方法与规则教程
    2498阅读0条评论69个赞
    自适应网页设计(Responsive Web Design)基础教程,涵盖核心方法与规则。学习如何创建在各种设备上都能良好显示的网页。关键在于理解视口设置、弹性布局、媒体查询等概念,确保内容在不同屏幕尺寸下自动调整,提供一致且优质的用户体验。掌握这些基础,你将能够设计出适应各种设备的网站,提升用户满意度和网站性能。
  • 自适应模板网站添加广告教程
    6044阅读5条评论109个赞
    关于如何在自适应模板网站中添加广告的教程:首先,选择适合网站风格和目标受众的广告形式;其次,根据广告尺寸调整自适应模板的布局设置,确保广告在不同设备上均能良好展示;接着,将广告代码嵌入指定位置,注意避免影响用户体验;最后,测试网站在不同浏览器和设备上的显示效果,确保广告加载迅速且不影响页面整体美观。简单几步,即可成功在自适应网站中添加广告。
  • 图片自适应浏览器窗口大小的JS实现教程
    1666阅读0条评论100个赞
    使用JavaScript实现图片自适应浏览器窗口大小的方法!教程简述:通过JavaScript监听窗口大小变化事件,动态调整图片尺寸以适应窗口。首先获取图片元素,然后编写函数根据当前窗口宽度计算新图片尺寸,最后添加事件监听器,在窗口大小改变时调用该函数。这样,无论用户如何调整浏览器窗口,图片都能完美适应,提升网页浏览体验。
  • swiper自适应图片高度,CSS一招解决!
    1563阅读1条评论11个赞
    轻松解决swiper图片高度自适应难题,只需一句CSS代码,即可实现灵活适应各种屏幕尺寸。无需复杂设置,让你的网页展示更加美观,用户体验更加流畅。简单高效,赶快尝试吧!
  • 帝国CMS用户中心自适应设计开发记录与教程
    1583阅读0条评论102个赞
    帝国CMS用户中心进行自适应扁平化设计改造开发纪实。本教程详细记录了修改过程,旨在帮助用户实现界面优化升级。通过自适应设计,提升不同设备上的用户体验;扁平化风格则让界面更加简洁现代。跟随教程,您将了解每一步的开发细节,轻松完成用户中心的改造。无论是开发者还是管理员,都能从中获益,让网站管理更加高效便捷。

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