海量素材、源码、软件、教程、资源

实时更新,建站资源,各种源码、素材、软件、课程、资源,自由下载



  • 注册
  • 查看作者
  • 使插入的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>
  • 0
  • 0
  • 0
  • 100
  • 请登录之后再进行评论

    登录
    聊天
    关注 1
    • 今日签到
    • 累计签到

    暂没有数据

  • 安逸
  • tcotu
  • an
    an
  • 发布
  • 任务
  • 动态
  • 到底部
  • 单栏布局 侧栏位置:
    关闭窗口
    下载海报