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

最近经常有网友问我的视频是怎么适应宽高的。在这里,我们来谈谈具体的实现方法,以及在后台文章文本编辑器中添加按钮的方法和技巧!

自动草稿

我记得我一开始也发现了这样一个问题,通过视频网站共享的视频代码wordpress教程菜鸟教程(embed、object或iframe)贴在文章发表后,在电脑上看可能网站制作品牌有哪些会很好网站制作品牌有哪些,但在手机浏览器上看会超过屏幕。

表格可以直接用百分比来适应,但是如果iframe的宽度属性设置了百分比,高度就不能适应屏幕。如果把高度设置成百分比,会有一个长方形的视频,试试就知道了。

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

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

视频自适应方法

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

  1. lxWordPress教程tx-video
  2.         &nbspwordpress教程菜鸟教程;      position:relative;
  3.                padding-bottom:56.25%;
  4.         &nbwordpresssp;      height:0;
  5.       &nbs网站制作教程p;        overflow:hidden;wordpress主题
  6. }
  7. .lxtwordpress教程菜鸟教程x-videoifrWordPress教程ame.lxtx-videoob网站制作需要多少钱ject.lxtx-videoembedwordpress模板{
  8.                position:absolute;
  9.   &nbswordpress怎么看别人的文章p;     &nwordpress狮子歌歌bsp;      0:0;
  10. &nbswordpress建站详细过程p;             &nbs网站制作软件制作效果p;lewordpress手机版下载ft:0;
  11.                width:100%;
  12. &网站制作nbs网站制作软件制作效果p; &nbspWordPress教程;   &nb网站制作流程与发布sp;        height:100%;
  13. }

在后台发布视频时,建议用iframe引用视频网站的视频,因为iframe可以在pc和手机上完美显示视频,另外两种方式不一定!用以下类似的方法引网站制作软件用中文本模式编辑器:

  1. <pclass=&#82网站制作教程20;网站制作品牌有哪些lxt网站制作需要多少钱x-video&#8221;&gt;&lt;iframesrc=&#8220;视频网站提供的iframe中的src链接&#8221;    frameborder=&#8220;0&#8221;  wordpress手机版下载  allowfullscreen=“allowordpress教程菜鸟教程wfullscreen&#8wordpress教程菜鸟教程221;&网站制作步骤流程图gt;&lt;/iframe&gt;&lt;/p&gt;

以优酷视频为例,如httpwordpress是什么意思://v.youku.com/v_show网站制作需要多少钱/id_XMTU2MzI4MTE5Ng=.html,它提供的代码如下:

  1. &lt;iframeheight=498width=510src=&#8220;http://player.youku.cowordpressm/embed/XMTU2MzI4MTE5wordpress怎么看别人的文章Ng=&#822wordpress狮子歌歌1;    frameborder=0*allowfullscreen&wordpressgt;&lt;/iframe&gt;

然后如果要在文章中插入自适应视频,在文本编辑器中插入以下代码就可以了:

  1. <pclas网站制作流程与发布s=&#8220;lxtx-video&#8221;&gt;&lt;iframesrc=&#8220;http://player.youku.com/embed/wordpress教程菜鸟教程XMTU2MzI4MTE5Ng=&#8221;    frameborder=&#8220;0&#8221;    allowfullscrwordpress建站详细过程een=&#8220;allowfulscreen&#8221;&gt;&lt;/iframe&gt;&lt;/p&gt;
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏
分享
评论 抢沙发

请登录后发表评论