如何在GitHub Readme中嵌入两个并排展示的视频

方案1：表格布局（全场景兼容） #

这是目前GitHub Markdown渲染下兼容性最好的实现方式，不会出现布局错位问题，直接将两个视频放在两列等宽的表格中即可：

<table>
  <tr>
    <!-- 左侧视频列 -->
    <td width="50%">
      <p align="center">MixtureVariants</p>
      <video src="替换为你的MixtureVariants视频地址" width="100%" controls>
    </td>
    <!-- 右侧视频列 -->
    <td width="50%">
      <p align="center">Earth Heightmap node</p>
      <video src="替换为你的Earth Heightmap node视频地址" width="100%" controls>
    </td>
  </tr>
</table>

参数说明：

• width="50%"给两列各分配一半的页面宽度，刚好符合宽度调整需求
• 视频标签加width="100%"可以让视频自适应列宽，不会溢出容器
• controls属性会给视频加上播放、进度条、音量调节等常用控制组件

方案2：内联块级元素布局 #

如果你不想使用表格，也可以用行内标签配合宽度设置实现：

<span>
  <video src="替换为MixtureVariants视频地址" width="49%" controls>
  <video src="替换为Earth Heightmap node视频地址" width="49%" controls>
</span>

注意这里宽度设为49%而不是50%，是为了预留两个视频之间的微小间距，避免因为宽度溢出导致第二个视频自动换行。

效果示例 #

注意事项 #

• 视频建议先上传到对应GitHub仓库，使用仓库内的相对地址或者GitHub原生的视频地址，避免外部资源无法加载
• 大体积视频可以给video标签添加preload="none"属性，页面打开时不会自动预加载视频，能有效提升页面访问速度

内容的提问来源于stack exchange，提问作者Elizabeth