最近录制了几套易语言大漠制作游戏外挂的视频，发布在了土豆，在引入自己的网站时，由于设置了视频的高度，宽度，在移动端浏览时出现了高度无法自适应，给浏览者带来极大的不舒服，缺乏体验性，百度了半天，调试了半天，大约有两个角度来解决，一个是js,一个是css,最后不得不大声说，伟大的css,使用css控制及方便又不影响加载速度…
最近录制了几套易语言大漠制作游戏外挂的视频，发布在了土豆，在引入自己的网站时，由于设置了视频的高度，宽度，在移动端浏览时出现了高度无法自适应，给浏览者带来极大的不舒服，缺乏体验性，百度了半天，调试了半天，大约有两个角度来解决，一个是js,一个是css,最后不得不大声说，伟大的css,使用css控制及方便又不影响加载速度，总之看到网上铺天盖地的文章也不知道谁是原创，更不知道站长测试了没有，总之我只有css的方法成功！强烈推荐css的方法，以下方法来源网络，不知道谁是原创了，无法保留版权。
一、CSS方法 在主题引入的css文件中，干脆直接在style.css文件中引入以下内容：（以下方法来自空气网络）
.rat0-video { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; } .rat0-video iframe,.rat0-video object,.rat0-video embed { position:absolute; top:0; left:0; width:100%; height:100%; } 以iframe方式引入视频一般有三种方法，我们要想在移动端支持，我们要采用Html5,及通用方式的引入方法，以土地为例：
<iframe src=”http://www.tudou.com/programs/view/html5embed.action?type=0&code=1Uu2flzzMhw&lcode=&resourceId=0_06_05_99″ allowtransparency=”true” allowfullscreen=”true” allowfullscreenInteractive=”true” scrolling=”no” border=”0″ frameborder=”0″ style=”width:480px;height:400px;”></iframe> 我们把它修改为以下模式： 也就是加入一个class为rat0-video的p标签：
<p class=”rat0-video”><iframe src=”视频网站提供的iframe方式里的src链接” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p> 最终引入样式如下：
<p class=”rat0-video”><iframe src=”http://www.tudou.com/programs/view/html5embed.action?type=0&code=1Uu2flzzMhw&lcode=&resourceId=0_06_05_99″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p> 二方法扩展：给后台文章文本编辑器添加按钮的方法 建议你阅读：把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器 在functions.php文件中加入，就可以在后台文本编辑器上面加上下面这些短代码了：
/** * 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮 * http://www.rat0.com/253.html */ // wordpress后台HTML编辑器添加自定义快捷标签按钮 add_action(‘after_wp_tiny_mce’, ‘bolo_after_wp_tiny_mce’😉; function bolo_after_wp_tiny_mce($mce_settings) { ?> <script type=”text/javascript”> QTags.addButton( ‘youkushipinjm’, ‘youku’, ‘<p class=”rat0-video”><iframe src=”http://player.youku.com/embed/视频特征ID” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” ); QTags.addButton( ‘acfunshipinjm’, ‘AcFun’, ‘<p class=”rat0-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=”rat0-video”><iframe frameborder=”0″ src=”通用代码中的src地址” allowfullscreen></iframe></p>\n’, “” ); QTags.addButton( ‘iqiyishipinjm’, ‘爱奇艺’, ‘<p class=”rat0-video”><iframe src=”通用代码中的src” frameborder=”0″ allowfullscreen=”true”></iframe></p>\n’, “” ); QTags.addButton( ‘yinyuetaishipinjm’, ‘音悦台’, ‘<p class=”rat0-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=”rat0-video”><iframe src=”通用代码中的src” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” ); QTags.addButton( ’56shipinjm’, ’56’, ‘<p class=”rat0-video”><iframe src=”http://www.56.com/iframe/视频特征ID” frameborder=”0″ allowfullscreen=””></iframe></p>\n’, “” ); QTags.addButton( ‘tudoushipinjm’, ‘tudou’, ‘<p class=”rat0-video”><iframe src=”iframe代码中的src” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” ); function bolo_QTnextpage_arg1() { } </script> <?php } 三、不负责的一种方法 在网上搜到很多以下版本，测试没有成功，不过可能是自己的某些设置导致，你完全可以试一下：
// 自动生成支持自适应的土豆视频代码 function wavelpc_iframe_handler_tudou( $matches, $attr, $url, $rawattr ) { if( wp_is_mobile() ){ $height = 250; } else { $height = 400; } $iframe = ‘<iframe width=”100%” height=”‘. $height .’px” src=”http://www.tudou.com/programs/view/html5embed.action?code=’. esc_attr($matches[1]) .’” frameborder=”0″ allowfullscreen></iframe>’; return apply_filters( ‘iframe_tudou’, $iframe, $matches, $attr, $url, $ramattr ); } wp_embed_unregister_handler(‘tudou’😉; wp_embed_register_handler( ‘tudou_iframe’, ‘#http://www.tudou.com/programs/view/(.*?)/#i’, ‘wavelpc_iframe_handler_tudou’ ); // 自动生成支持自适应的优酷视频代码. function wavelpc_iframe_handler_youku( $matches, $attr, $url, $rawattr ) { if( wp_is_mobile() ){ $height = 250; } else { $height = 400; } $iframe = ‘<iframe width=”100%” height=”‘. $height .’px” src=”http://player.youku.com/embed/’. esc_attr($matches[1]) .’” frameborder=”0″ allowfullscreen></iframe>’; return apply_filters( ‘iframe_youku’, $iframe, $matches, $attr, $url, $ramattr ); } wp_embed_unregister_handler(‘youku’😉; wp_embed_register_handler( ‘youku_iframe’, ‘#http://v.youku.com/v_show/id_(.*?).html#i’, ‘wavelpc_iframe_handler_youku’ ); 解释：250是移动端高度预设，400是pc端高度预设，自己根据需要改动。
评论(0)