最近经常有网友询问，我的视频是怎样做到自适应宽高度的？在此龙笑天下就来说下具体的实现方法，及给后台文章文本编辑器添加按钮的方法技巧！
记得我当初也发现了这样的问题，通过视频网站分享的视频代码（embed、object或iframe方式）贴到文章里发布后，在电脑上看可能会好好的，但是在手机的浏览器上看就会超出屏幕。
表格还好直接用百分比就可以自适应，但是iframe的宽度属性设置了百分比的话，高度不能自适应屏幕。把高度设置成百分比，就会出现一个长方形的视频，自己试过就知道了。
网上也有一大堆的解决办法，尝试了很多发现起作用的并没有几个，也没有能让我满意的适用所有网站的方法。
后来终于找到一篇文章解决了这个问题，原来视频自适应这么简单，只需要一段css代码就ok了……具体效果可点我查看。
视频自适应方法
首先，在主题的主css，如style.css中加入以下css代码：
- .lxtx-video{
- position:relative;
- padding-bottom:56.25%;
- height:0;
- overflow:hidden;
- }
- .lxtx-videoiframe,.lxtx-videoobject,.lxtx-videoembed{
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- }
然后，后台发布视频时，建议以iframe方式引用视频网站的视频，因为iframe方式在pc端和手机端都能完美显示视频，另外2种方式就不一定了！在中文本模式编辑器里用下面的类似方法引用：
- <pclass=“lxtx-video”><iframesrc=“视频网站提供的iframe方式里的src链接”frameborder=“0”allowfullscreen=“allowfullscreen”></iframe></p>
以优酷视频为例，如这个视频：http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html，用它的通用方式（也就是iframe方式），它提供的代码如下：
- <iframeheight=498width=510src=“http://player.youku.com/embed/XMTU2MzI4MTE5Ng==”frameborder=0allowfullscreen></iframe>
那么我们要在文章中插入自适应视频的话，在文本编辑器中要插入以下代码就ok了：
- <pclass=“lxtx-video”><iframesrc=“http://player.youku.com/embed/XMTU2MzI4MTE5Ng==”frameborder=“0”allowfullscreen=“allowfullscreen”></iframe></p>
本文由【好易之】整理自网络！
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69828.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69828.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。
微信扫一扫 
