一些CSS备忘……

之前无论以什么姿势贴视频都只有一窄条的问题被简简单单的解决了……

首先感谢一下CSS-Trick的“可变宽度视频”这篇文章,虽说没帮上太多的忙……但确实是一篇好文章。

之前有个莫名其妙的问题就是视频没法设置高度,无论怎么贴怎么设置都是一窄条,刚好150像素高,很无语。
昨天芜菁同学怒♂气冲冲的找到我说贴视频贴不上,我躺在床上用手机翻到手心发烫(这手机发热量忒高了吧?!),无论怎么搞,升级插件啊改贴视频代码甚至用上CSS-Trick那篇文章,依然还是150px……
于是昨晚一怒之下去主题的制作组发了个ticket。

今天他们还是没回复我,无奈之下我就继续折腾CSS样式表(我知道问题出在这儿……),终于在审查元素的时候发现无论怎么改embed元素的高度都被覆盖成了’auto’,而之前那篇文章说得很明白,这样会导致贴进来的视频会按照默认高度150像素渲染,于是就一窄条了……
刚好就是现在这个主题的主样式表style.css,里面有一行.div embed { width: 100%; height: auto;}删掉之后所有的视频终于都正常了……

不过从CSS-Trick拷过来的videoWrapper类还是放在这儿了,它的好处就是可以让视频随着页面宽度而自动改变大小,不过没什么太大意义,因为网站本身被我设置成1000px固定宽度了(否则首页那些图片会被拉伸的不成样子……)。

使用方法就是:
<div class="videoWrapper">
把HTML代码贴到这里
</div>

顺便再说一句优酷和youtube的视频直接用 <video>播放页地址</video> 就能贴了。芜菁同学还是去找优酷的链接吧……

Share

发表评论

电子邮件地址不会被公开。 必填项已用*标注