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

自动草稿

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

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

网上也有一大堆的解决} _ # ` 1 w H J 2办法,尝E 6 ` q ~ h ( E试了很多发现起作用的并没有几个,也没有能让我满意的适用所有网站的1 n = , j方法。

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

视频自适应方法

首先,在主题的主css,如style.css中加入G = q m # 8以下css代码:

  1. .lxtx-video{
  2. position:relative;
  3. padding-bottom:56.25%;
  4. height:0;
  5. overflow:hidden;
  6. }
  7. .lxt5 K ) S F j 4x-v[ m + sideoiframe,.lxtx-videoob4 = W % ,ject,.lxtx-videoembed{
  8. position:absolute;
  9. top:0;
  10. left:0;
  11. width:100%;
  12. height:100%;
  13. }

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

  1. <Y r % ~ MpC A j F } U D &class=“lxtx-video”><iframesrc=“视频网站提供的iframe方式里的src链接”frameborder=“0”allowfullscreen=“allowfullscreen”></iframe></p>

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

  1. <iframeheigV g X E bht=498widC h P O L B 1 0 mth=510src=“http://player.youku.com/embed/XMTU2MzI4MTE5Ng==”frameborder=0allowfull5 k V v ! ascreen></iframe>

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

  1. <pclass=“lxtx-video”><iframesrc=“http://played I 5 er.youku.com/embed/XMTU2r ^ 6 l 5 | YMzI4MTE5Ng==”frameborder=“0”allowfullscreen=_ _ Gallowfullscreen”></iframe>&lo v 3 S – ? ht;/p>

发表评论

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