要在织梦(DedeCMS)中插入优酷视频,首先需要获取优酷视频的嵌入代码,然后通过织梦的后台编辑器或自定义模板实现插入,以下是详细步骤和注意事项:

(图片来源网络,侵删)
获取优酷视频嵌入代码
- 打开优酷视频页面:在优酷官网找到目标视频,点击播放按钮下方的“分享”按钮。
- 复制嵌入代码:在弹出的分享窗口中,选择“嵌入”选项,复制默认生成的iframe代码或HTML5代码。
<iframe height="498" width="510" src="https://player.youku.com/embed/XNDAxNTI3NzIwMA==" frameborder="0" 'allowfullscreen'></iframe>
注意:部分优酷视频可能需要选择“HTML5”模式以确保兼容性。
通过织梦编辑器插入视频
方法1:使用HTML编辑模式
- 登录织梦后台,进入“内容管理” → “添加文档”或“编辑文档”。
- 切换到HTML源码模式:在编辑器工具栏中点击“源代码”按钮(通常显示为“<>”图标)。
- 粘贴嵌入代码:将复制的优酷代码粘贴到文章内容中,确保代码前后无多余空格或换行。
- 保存并预览:退出HTML模式,点击“保存”按钮,然后在前台页面查看效果。
方法2:使用自定义字段(适用于模板调用)
- 添加自定义字段:在后台“内容模型管理”中编辑当前使用的模型(如“文章模型”),添加一个名为“youku_video”的文本字段。
- 上传视频代码:添加文档时,在“youku_video”字段中粘贴优酷嵌入代码。
- 修改模板文件:打开模板文件(如
article_article.htm
),在需要显示视频的位置添加以下代码:{dede:field.youku_video runphp='yes'} if(@me<>'')@me = '<div class="video-container">@me</div>'; {/dede:field.youku_video}
并在CSS中添加样式:
.video-container { margin: 10px 0; text-align: center; } .video-container iframe { max-width: 100%; height: auto; }
注意事项
- 代码兼容性:部分优酷视频的嵌入代码可能包含JavaScript,需确保织梦编辑器未过滤相关标签。
- 移动端适配:通过CSS设置
max-width: 100%
和height: auto
,使视频在手机端自适应。 - 权限问题:若优酷视频设置了“禁止外链”,则嵌入代码可能无法正常播放。
常见问题解决
问题现象 | 可能原因 | 解决方法 |
---|---|---|
视频无法播放 | 嵌入代码错误或优酷链接失效 | 重新复制优酷嵌入代码,检查视频是否删除或设为私密 |
视频样式错乱 | 编辑器自动添加了额外样式 | 在HTML模式下删除代码前后多余的<p> 或<div>
|
移动端显示不全 | 未设置响应式样式 | 添加CSS:iframe { width: 100%; height: auto; } |
相关问答FAQs
问题1:为什么插入优酷视频后,前台页面只显示代码而非播放器?
解答:这通常是因为织梦编辑器默认过滤了iframe标签,解决方法:
- 进入后台“系统” → “系统基本参数” → “核心设置”。
- 找到“Html编辑器默认调用设置”,确保“允许iframe”选项为“是”。
- 清除浏览器缓存后重新保存文章。
问题2:如何让优酷视频在织梦文章中居中显示?
解答:可通过CSS或直接修改代码实现。

(图片来源网络,侵删)
- 方法1(推荐):在嵌入代码外层添加
div
并设置样式:<div style="text-align: center;"> <iframe src="https://player.youku.com/embed/..." frameborder="0" allowfullscreen></iframe> </div>
- 方法2:在模板文件中调用时,使用织梦的
{dede:field.body}
并自定义样式,确保视频容器居中。
通过以上步骤,即可在织梦网站中成功插入并适配优酷视频,如遇其他问题,可检查浏览器控制台错误提示或联系优酷客服确认视频嵌入权限。

(图片来源网络,侵删)