教你在公众号图文视频上添加悬浮文字

公众号里的图文消息如果插入腾讯视频，是必须在正文中加入文字的。而有些公众号发布的图文消息，正文只有视频，上面有一行文字，点击播放就没有了，参考下图，那么这种效果如何实现呢？本文给出了相关原理和具体的实现步骤。

富文本编辑器

我们知道微信的编辑器是一个富文本编辑器，遵循所见即所得的原则，What You See Is What You Get，简称WYSIWYG。

当然这是一个比较轻量的富文本编辑器，基本能满足微信平台的使用，诸如知乎、这样的平台编辑器更加轻量，当然它们不一定是富文本，也可能是markdown编辑器。类似UEditor 这样的富文本编辑器功能更加完善，比较适合在后台用来编辑文章。

135编辑器

微信自己的编辑器很难实现精美的边框和布局，好在现在第三方编辑器非常多，我用的比较多是135编辑器，功能比较全，模板也很多。

使用编辑器自带的『源代码』按钮我们可以看到，精美的图文布局本质上其实就是文字+样式，也就是我们经常能听到html+css。具体的语法我们不需要掌握，知道这个基础概念就可以了。

随便找一个有这种视频的图文消息链接，在PC上打开。crtl+u或者右键查看源代码，查找视频上的文本，可以清楚地看到这个内容是通过html和css实现的。

微小宝

既然已经知道这种效果的添加原理，那么我们在较为高级的富文本编辑器中获得这段代码就可以了。可惜135编辑器导入文章的功能是需要付费使用的，只能另想它法了。

微小宝是一个免费的公众号运营助手，这里就可以派上用途了。在查找并关注公众号后，我们可以选择历史图文新建图文消息，然后编辑图文就可以看到带有视频图文信息的源代码。

这段代码要修改的只有一个地方，也就是腾讯视频的id。我随机在腾信视频上找了几个视频，url的组成不同，但是url中最后10位的字符串才是我们真正需要的，在编辑中替换即可，预览时也可以看到腾讯视频的内容。

（1）在微小宝中编辑代码，然后进入普通模式把这段视频样式复制到公众号中，或者利用平台自带的同步功能一键同步到公众号中去。

（2）在135编辑器编辑代码，然后进入普通模式把这段视频样式复制到公众号中。毕竟135编辑器的编辑功能相对前者要相对强大一点。

两种方法随便选择一个，上面的这个步骤是最为重要的一步，建议在谷歌浏览器下操作完成，其他浏览器可能会出现不兼容的现象，效果不是很好。

针对这段代码可以复制在笔记中保存，方便下次使用。

总结方法如下

在135等富文本编辑器中直接粘贴复制保存过的代码，替换腾讯视频的id，然后复制内容到微信公众号中，预览，发送即可。

下面放一个这样的视频效果吧，『四美不开心』，让你笑一下。

以后也会不定期更新一些这样的使用技巧和经验的，欢迎交流哦。