dedecms怎么插入腾讯视频？教程步骤详解

第一步：获取腾讯视频的嵌入代码

这是最关键的一步,代码获取正确，后续操作才能顺利进行。

1. 打开腾讯视频官网，并找到你想要插入的视频，点击视频下方的【分享】按钮。

2. 在弹出的分享窗口中,点击【嵌入】选项。

3. 选择合适的尺寸和代码类型。

   • 尺寸：腾讯视频提供了多种预设尺寸，如 16:9（推荐，宽屏）、4:3（传统屏）、1:1（正方形）等，你可以根据你网站页面的布局来选择，推荐使用 16:9。
   • 代码类型：务必选择 iframe，这是目前最通用、最兼容的方式。

4. 复制代码：选中下方的 <iframe> 开头到 </iframe> 结尾的所有代码，然后复制下来，这段代码就是我们接下来要使用的。

   
   （图片来源网络，侵删）

示例代码（16:9尺寸）：

<iframe 
    class="video_iframe" 
    src="https://v.qq.com/txp/iframe/player.html?vid=z3230n3k6y6" 
    allowfullscreen="true" 
    frameborder="0">
</iframe>

注意：vid 参数后面的 z3230n3k6y6 就是视频的唯一ID，每个视频都不一样。

第二步：在DedeCMS中插入视频代码

获取到代码后,我们就可以把它发布到我们的网站内容里了，这里提供两种最常用的方法。

编辑器中直接插入（最常用）

这种方法适合直接在文章内容中嵌入视频。

1. 登录DedeCMS后台，进入【核心】 -> 【内容发布管理】 -> 【添加文档】。

2. 填写文章基本信息、栏目等）。

3. 切换到“源代码”模式：这是非常重要的一步！

   • 编辑器工具栏上,找到一个类似 </> 的图标，点击它。如果不切换到源代码模式，直接粘贴代码，编辑器可能会把 <iframe> 标签过滤掉，导致视频无法显示。

4. 粘贴代码：在源代码编辑模式下，将你第一步复制的 <iframe> 代码粘贴到你想要视频出现的位置。

5. 切换回“可视化”模式：再次点击 </> 图标，切换回可视化模式，你可能会看到一个视频占位框，这说明代码已经成功插入。

6. 保存文档：点击“保存文档”或“发布文档”按钮。

你可以去前台页面查看,视频应该已经可以正常播放了。

使用自定义封面（更美观）

如果你希望视频在加载前显示一个自定义的封面图片,而不是腾讯视频默认的封面，可以这样做。

1. 准备封面图片：上传一张你喜欢的封面图片到你的网站服务器，并记下图片地址（/uploads/images/2025/video_cover.jpg）。

2. 修改嵌入代码：将你复制的 <iframe> 代码进行改造，在 <iframe> 标签内部，在 </iframe> 之前，添加一个 <img> 标签作为封面。

   修改后的代码示例：

   <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
       <iframe 
           class="video_iframe" 
           src="https://v.qq.com/txp/iframe/player.html?vid=z3230n3k6y6" 
           allowfullscreen="true" 
           frameborder="0"
           style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
       </iframe>
       <!-- 这里是封面图片，注意src路径要修改成你自己的 -->
       <img 
           src="/uploads/images/2025/video_cover.jpg" 
           style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" 
           alt="视频封面">
   </div>

   代码解释：

   • <div style="...">：这个 div 容器是为了保证视频的宽高比（这里是 16:9），防止页面布局错乱。
   • <iframe>：视频播放器本身，style 属性让它填满整个容器。
   • <img>：自定义的封面图片。z-index: -1; 确保它在视频播放层的下方。object-fit: cover; 让图片能完整覆盖区域而不变形。

3. 插入代码：同样地，在DedeCMS后台发布文章时，切换到“源代码”模式，然后将上面这段完整的代码粘贴进去。

这样,用户在点击播放前，就会看到你设置的精美封面图片了。

第三步：常见问题与解决方案

问题1：粘贴代码后，前台页面显示空白或只显示代码？

原因：这是最常见的问题，DedeCMS的编辑器（尤其是旧版本）出于安全考虑，默认会过滤掉 <iframe>、<script> 等标签。 解决方案：

1. 确认是否切换到“源代码”模式进行粘贴，这是首要检查项。
2. 修改编辑器配置：
   • 进入DedeCMS后台【系统】 -> 【系统基本参数】 -> 核心设置。
   • 找到 Html编辑器默认调用设置 这一项。
   • 将其值修改为 ckeditor 或 xheditor 等功能更完善的编辑器（新版本默认是 ckeditor）。
   • 保存后,重新进入编辑器，再尝试插入代码。
3. 修改编辑器过滤规则（进阶）：如果问题依旧，需要修改编辑器配置文件，移除对 iframe 的过滤，对于 ckeditor，需要修改 /include/ckeditor/config.js 文件，找到 allowedContent 或 filter 相关配置，确保 iframe 标签被允许，此操作需要一定技术能力，请谨慎操作。

问题2：视频尺寸不正确，页面布局被撑开？

原因：没有处理好视频的宽高比。 解决方案：

• 强烈推荐使用方法二中的 <div> 容器代码，它通过 padding-bottom: 56.25% (对应16:9) 的技巧，可以完美地自适应任何宽度的容器，同时保持视频的原始比例，不会撑破页面布局。
• 如果你只想设置固定宽度,可以直接给 <iframe> 加上 style="width: 100%; max-width: 800px;" 这样的样式，但不如容器方法灵活。

问题3：视频在手机端无法全屏播放？

原因：可能是样式或代码问题。 解决方案：

• 确保你的 <iframe> 代码中包含了 allowfullscreen="true" 属性。
• 使用方法二中带容器的代码,它通常在移动端有更好的表现。
• 检查你的网站CSS是否有全局设置 iframe { max-width: none; } 之类的冲突。

遵循以上教程,你就可以在DedeCMS中顺利地插入并展示腾讯视频了。