文章评分
次,平均分 :
好久没写技术类博文,这次暂且水一水上次在博客里发了一段个人制作的视频,使用的优酷提供的分享代码:就是一个embed视频标签,无奈优酷提供的代码视频长宽都是死的,600*400的样子,在电脑上还行,在手机上宽度太大直接撑爆了手机屏幕,用户体验很不好,下面的代码就是实现在不同设备自动适应宽度的。实现原理很简单,就是用js(jquery)动态设定视频的长宽度。
请将下面的代码加进主题的functions.php文件中,并且将代码中所有的#main-wrap-left换成显示文章的div的class名或者ID。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * 视频比例 */ function videoWidth(){ if (!wp_is_mobile()){ echo '<script type="text/javascript">' .'$(document).ready(function(){$(\'embed\').height($(\'#main-wrap-left\').width() * 0.6);' .'$(\'embed\').width($(\'#main-wrap-left\').width() * 0.8);});</script>'; }else{ echo '<script type="text/javascript">' .'$(document).ready(function(){$(\'embed\').height($(\'#main-wrap-left\').width() * 0.70);' .'$(\'embed\').width($(\'#main-wrap-left\').width() * 0.99);});</script>'; } } add_action ( 'wp_footer', 'videoWidth' ); |

关注我的微信,获取文章更新
如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!
转载注明原文出处:王柏元的博客>>https://wangbaiyuan.cn/let-blog-into-adaptive-video-width.html
暂无评论