扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 560|回复: 1

织梦系统优酷视频手机端无法自适应?

[复制链接]
  • TA的每日心情

    2019-7-3 11:59
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    14

    主题

    31

    帖子

    270

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    270
    发表于 2019-5-26 23:42:47 | 显示全部楼层 |阅读模式
    最近有网友发现,DEDECMS5.7系统自带的文章编辑器插入优酷视频代码后用手机端打开无法自动适应,现在主要还是做移动端的网站体验,如果视频不能适应手机端,那体验就非常差,所以我们要解决掉这个问题。

    为什么不能适应原因是很简单,因为游客的同游代码里已经明确设置了width 宽度和高度height,这个尺寸是适合电脑端的,因为我们的手机屏幕没有这么大,所以会出现打开文章页视频会很大无法正常体验,这个时候我们就需要利用代码来进行优化,
    如何解决优酷视频手机端无法适应问题?我们直接进入主题吧

    首先是复制通用代码

    QQ图片20190526233848.png
                                  打开织梦的文章编辑器,源码模式

    QQ图片20190526233921.png

    src后面的就是优酷视频的播放地址,我们把这个地址直接复制插入下面的这个代码里即可(除了这个地址其他的代码不要复制进来)。


    <iframeframeborder="0" allowfullscreen="" src="视频地址复制到这里"  width="100%"id="video"></iframe>
    <scripttype="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>

    这样优酷视频就能自动适应宽度了,点击切换文章编辑模式,编写好文章内容后保存发布,优酷视频在手机和电脑端都能完美运行了。
    QQ图片20190526233950.jpg

    你还可以将优酷视频用标签调用,将代码写入内容页代码里,放置在 {dede:field.body/}之前,还可以加一个判断语句,如果标签值为空,就直接隐藏这段代码即可。好了希望我的回答能够帮助你解决织梦手机端无法适应优酷视频的问题。

    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    4

    帖子

    16

    积分

    新手上路

    Rank: 1

    积分
    16
    发表于 2019-6-14 22:14:17 | 显示全部楼层
    非常好,顶一下
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    商务合作
    时间:周一至周日:09:00 - 21:00
    本站所展示信息均由会员自行提供,会员依法对其提供的任何信息承担全部责任,本网站不承担任何责任,为保障您的利益,请注意可能存在的风险与安全!

    微生活是一个最有趣的分享内容平台,分享有价值的信息,带你欣赏每一个精彩瞬间,了解每一个幕后故事,分享你想表达的,让全世界都能听到你的心声,微生活只为发现新鲜事。

    Powered by Discuz! X3.4 粤ICP备19064015号-1 © 2018-2019 微生活_记录美好生活

    技术支持:华夏网络工作室

    QQ|手机版|小黑屋|微生活_记录美好生活 |网站地图

    GMT+8, 2019-10-20 04:51 , Processed in 0.084100 second(s), 29 queries .

    快速回复 返回顶部 返回列表