wordpress插入第三方视频自适应代码（转载）

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

只需要一段css代码就ok了.....

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

.lxtx-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}.lxtx-video iframe,.lxtx-video object,.lxtx-video embed{position:absolute;top:0;left:0;width:100%;height:100%;}

然后，后台发布视频时，建议以iframe方式引用视频网站的视频，iframe方式在pc端和手机端都能完美显示视频，中文本模式编辑器下引用方法：

手动添加结束，自动添加需要在functions.php中加入代码：

/**

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

* http://www.ilxtx.com/how-to-insert-adaptive-video.html

// wordpress后台HTML编辑器添加自定义快捷标签按钮

add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');

function lxtx_bolo_after_wp_tiny_mce($mce_settings) {

QTags.addButton( 'youkushipinjm', 'youku',

'<p class="lxtx-video"><iframe src="http://player.youku.com/embed/视频特征ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );

QTags.addButton( 'acfunshipinjm', 'AcFun',

'<p class="lxtx-video"><iframe src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?type=page&url=http://www.acfun.tv/v/视频特征ID" id="ACFlashPlayer-re" frameborder="0"></iframe></p>\n', "" );

QTags.addButton( 'qqshipinjm', 'QQ',

'<p class="lxtx-video"><iframe frameborder="0" src="通用代码中的src地址" allowfullscreen></iframe></p>\n', "" );

QTags.addButton( 'iqiyishipinjm', '爱奇艺',

'<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="true"></iframe></p>\n', "" );

QTags.addButton( 'yinyuetaishipinjm', '音悦台',

'<p class="lxtx-video"><embed src="代码中的src" quality="high" align="middle" allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed></p>\n', "" );

QTags.addButton( 'souhushipinjm', '搜狐',

'<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );

QTags.addButton( '56shipinjm', '56',

'<p class="lxtx-video"><iframe src="http://www.56.com/iframe/视频特征ID" frameborder="0" allowfullscreen=""></iframe></p>\n', "" );

QTags.addButton( 'tudoushipinjm', 'tudou',

'<p class="lxtx-video"><iframe src="iframe代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );

</script>

<?php

}

友情提示：其它视频网站根据各自视频网站提供的引用方式代码可自行增添修改吧！不仅是以上这些按钮，还可以加入一些其它的功能按钮哦！

代码解析： QTags.addButton( '', '', '', '' );

四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行；

形象说明： QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );

可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮！

原文链接：https://www.wpdaxue.com/flash-iframe.html

wordpress插入第三方视频自适应代码（转载）

推荐阅读更多精彩内容