公众号如何把视频嵌入图中？一篇超实用的图文教程
为什么要把视频嵌入图？
在公众号排版中，视频直接插入正文往往显得突兀，占用空间大，且无法与图片形成融合。将视频嵌入图片（例如在iPhone手机界面图中嵌入视频）可以：
- 提升视觉整体性
- 模拟实景操作，增强代入感
- 节省版面，让内容更紧凑
方法一：使用编辑器自带的小程序模板（新手推荐）
许多公众号编辑器（如135编辑器、秀米）提供了单图视频模板。步骤：
- 搜索模板关键词“视频”或“播放图标”。
- 选择带有视频图标的图片模板，替换为你的背景图。
- 点击模板中的视频区域，粘贴视频链接（需使用腾讯视频链接）。
注意：此方法要求视频必须是腾讯视频平台上传的，且模板的样式可能有限。
方法二：通过修改HTML代码实现（可高度自定义）
如果你有一定代码基础，可以在公众号后台或第三方编辑器中使用自定义代码。示例代码：
<figure style="position: relative; padding-top: 56.25%;">
<video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls src="你的视频地址.mp4"></video>
<img style="position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none;" src="你的背景图.jpg">
</figure>
代码原理：将背景图设置为绝对定位覆盖在视频之上，通过pointer-events: none;让鼠标穿透点击到视频。注意视频比例需适配（如16:9）。
操作步骤：
- 在编辑器中插入“视频”组件，获得视频链接（推荐使用mp4直链）。
- 插入“图片”组件，上传背景图。
- 切换到HTML视图，将上述代码中的路径替换，并置入合适位置。
避坑指南
- 素材比例：视频与背景图要保持比例一致，否则会出现拉伸变形。
- 链接格式：微信原生只支持腾讯视频，第三方视频需使用允许外链的地址，否则可能失效。
- 测试审核：发布前务必在手机端预览，检查视频是否正常播放、图片是否遮挡点击区域。
设计建议
建议背景图设计成带有凹槽、屏幕边框或手机轮廓，视频内容正好嵌入其中，视觉上像在真实设备中播放。可搭配播放按钮图片提示用户点击。
掌握以上方法，你可以让公众号图文更加生动有趣。快去试试吧！