使插入的FLASH视频自适应宽高度及为后台编辑器添加自定义按钮

最近经常有网友询问,我的视频是怎样做到自适应宽高度的?在此龙笑天下就来说下具体的实现方法,及给后台文章文本编辑器添加按钮的方法技巧!

使插入的FLASH视频自适应宽高度及为后台编辑器添加自定义按钮

记得我当初也发现了这样的问题,通过视频网站分享的视频代码(embed、object或iframe方式)贴到文章里发布后,在电脑上看可能会好好的,但是在手机的浏览器上看就会超出屏幕。

表格还好直接用百分比就可以自适应,但是iframe的宽度属性设置了百分比的话,高度不能自适应屏幕。把高度设置成百分比,就会出现一个长方形的视频,自己试过就知道了。

网上也有一大堆的解决办法,尝试了很多发现起作用的并没有几个,也没有能让我满意的适用所有网站的方法。

后来终于找到一篇文章解决了这个问题,原来视频自适应这么简单,只需要一段css代码就ok了……具体效果可点我查看。

视频自适应方法

首先,在主题的主css,如style.css中加入以下css代码:

  1. .lxtx-video {
  2.     position:relative;
  3.     padding-bottom:56.25%;
  4.     height:0;
  5.     overflow:hidden;
  6. }
  7. .lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
  8.     position:absolute;
  9.     top:0;
  10.     left:0;
  11.     width:100%;
  12.     height:100%;
  13. }

然后,后台发布视频时,建议以iframe方式引用视频网站的视频,因为iframe方式在pc端和手机端都能完美显示视频,另外2种方式就不一定了!在中文本模式编辑器里用下面的类似方法引用:

  1. <p class=“lxtx-video”><iframe src=“视频网站提供的iframe方式里的src链接” frameborder=“0” allowfullscreen=“allowfullscreen”></iframe></p>

以优酷视频为例,如这个视频:http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html,用它的通用方式(也就是iframe方式),它提供的代码如下:

  1. <iframe height=498 width=510 src=“http://player.youku.com/embed/XMTU2MzI4MTE5Ng==” frameborder=0 allowfullscreen></iframe>

那么我们要在文章中插入自适应视频的话,在文本编辑器中要插入以下代码就ok了:

  1. <p class=“lxtx-video”><iframe src=“http://player.youku.com/embed/XMTU2MzI4MTE5Ng==” frameborder=“0” allowfullscreen=“allowfullscreen”></iframe></p>

人已赞赏
WordPress建站

使用 WooSidebars 为不同的页面设置不同的侧边栏

2021-3-10 7:15:43

WordPress建站

WordPress解决优酷、土豆视频移动端观看问题并自适应

2021-3-10 7:15:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索