文章评分 次，平均分 ：
好久没写技术类博文，这次暂且水一水上次在博客里发了一段个人制作的视频，使用的优酷提供的分享代码：就是一个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
暂无评论