公众里如何发布竖版的视频，使用SVG方式

公众号里发布的视频 默认都是两边有黑边的。

## 问题描述：
https://developers.weixin.qq.com/community/develop/doc/000c6a5f33ceb0a83d8e7577151400?jumpto=comment&commentid=000604f2340298b83e8e4dc3b5f4

![](/media/202408/2024-08-23_150513_4875640.237506217378185.png)

## 如何解决？

在浏览器上，edge或谷歌浏览器上，安装 壹伴插件，安装完成之后，在编辑推文的时候，编辑器上方会多出一排工具栏：

![](/media/202408/2024-08-24_105152_1449970.1654834642228783.png)

点这个按钮，切换html源代码，找到类似下面的视频iframe

![](/media/202408/2024-08-24_105314_8458530.6121021692156722.png)

~~~
<iframe class="video_iframe rich_pages wx_video_iframe" data-vidtype="2" data-mpvid="wxv_36037559xxxxx77925" data-cover="http%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FaNGFoy821zFq16OIgRhCsTbs0uCMOoL9Xy76YicabiaY6EUUv6rAXOoK4hRxxxxxxxxWIJbEiccoickK81ribickBA%2F0%3Fwx_fmt%3Djpeg" allowfullscreen="" frameborder="0" data-ratio="0.5625" data-w="1080" width="578" height="434" src="/cgi-bin/readtemplate?t=tmpl/video_tmpl&amp;vid=wxv_360375xxxx77925" style="border-radius: 4px;"></iframe>
~~~

把上面这段代码转换成 下面这种svg代码就可以了，

~~~
<section name="preview-3" style="-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;text-align: center;line-height:0;">
  <p style="margin-top:-lvw;transform: scale(2.37);transform-origin:50% 0px;margin-top:-lpx;" label="404.tech_svg_3A">
    <iframe class="video_iframe rich_pages wx_video_iframe" data-vidtype="2" data-mpvid="wxv_3532881eeeee6518532" 
    data-cover="http%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FU2l9PEboeeeeeeiauf6r1Lj0H9wvhhIH2aC0hJkn0KR6JWwHSZUA8Vn7LViaBrxfqibLHeuL8MeFA%2F0%3Fwx_fmt%3Djpeg" 
    allowfullscreen="" frameborder="0" data-ratio="0.5625" data-w="1080" width="578" height="434" 
    src="/cgi-bin/readtemplate?t=tmpl/video_tmpl&amp;vid=wxv_3532eeee066518532" style="border-radius: 4px;"></iframe>
  </p>
  <section style="margin-top:0px;display:block;line-height: 0;">
    <svg label="404.tech_svg_3" style="margin-top:0px;display:block;line-height:0;" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    </svg>
  </section>
</section>
~~~

主要就是  `data-cover`  `data-vidtype` `data-mpvid`  `src` 这4个字段的替换。

把替换完之后的代码 ，覆盖回去就可以了。。

## 在线工具：

手工替换的非常的麻烦，我在高铁上花了半个小时写了个快捷的在线转换工具：https://www.mmno.com/svg.html