511遇见最近录制了几套易语言大漠制作游戏外挂的视频,发布在了土豆,在引入自己的网站时,由于设置了视频的高度,宽度,在移动端浏览时出现了高度无法自适应,给浏览者带来极大的不舒服,缺乏体验性,百度了半天,调试了半天,大约有两个角度来解决,一个是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,及通用方式的引入方法,以土地为例:
我们把它修改为以下模式:
链接" frameborder="0" allowfullscreen="allowfullscreen">
最终引入样式如下:
bed.action?type=0&code=1Uu2flzzMhw&lcode=&resourceId=0_06_05_99" frameborder="0" allowfullscreen="allowfullscreen">
二方法扩展:给后台文章文本编辑器添加按钮的方法
建议你阅读:把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) {
?>
}
三、不负责的一种方法
在网上搜到很多以下版本,测试没有成功,不过可能是自己的某些设置导致,你完全可以试一下:
function wavelpc_iframe_handler_tudou( $matches,$attr,$url,$rawattr ) {
if( wp_is_mobile() ){ $height = 250; } else { $height = 400; }
$iframe = '
return apply_filters( 'iframe_tudou',$iframe,$matches,$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,$rawattr ) {
if( wp_is_mobile() ){ $height = 250; } else { $height = 400; }
$iframe = '
return apply_filters( 'iframe_youku',$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端高度预设,自己根据需要改动。
原文地址:https://www.jb51.cc/wordpress/422788.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。