MakeMeDemo
下载

嵌入到网站

上传之后，一个演示就是你存储里的一个文件夹。有四种方式把它展示给别人，选一种，复制代码就行。记得把示例地址换成你自己的：App 的上传结果里就是真实地址，这些代码也能直接复制。

四种用法

分享链接

直接发给任何人。打开是一个完整页面：演示、简介和步骤列表。

https://your-site.com/demos/my-demo/index.html

嵌入播放器

把播放器放进你已有的网页里。

<iframe
  src="https://your-site.com/demos/my-demo/player.html"
  width="100%"
  style="aspect-ratio: 16 / 10; border: 0; border-radius: 12px"
  loading="lazy" allowfullscreen>
</iframe>

先封面，点击再播放

先显示演示封面和播放按钮，点击后才加载演示，不拖慢你的网页。

<div id="mmd-demo" style="position:relative;max-width:960px;aspect-ratio:16 / 10;
  border-radius:12px;overflow:hidden;cursor:pointer">
  <img src="https://your-site.com/demos/my-demo/poster.jpg" alt=""
    style="width:100%;height:100%;object-fit:cover;display:block">
  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px rgba(0,0,0,.2)"></span>
</div>
<script>
document.getElementById('mmd-demo').addEventListener('click', function () {
  this.innerHTML = '<iframe src="https://your-site.com/demos/my-demo/player.html" allowfullscreen' +
    ' style="width:100%;height:100%;border:0"></iframe>';
}, { once: true });
</script>

弹窗按钮

一行代码：网页角落出现「View demo」按钮，点开后演示浮在页面上方。

<script src="https://your-site.com/demos/my-demo/embed.js" defer></script>

文件夹里有什么

index.html
完整页面，分享链接打开的就是它
player.html
只有播放器，自动适应放它的框，给 iframe 用
poster.jpg
演示的第一帧，用作封面或链接预览图
demo.json
演示本身：步骤、文字和设置
player.js
播放器代码，上面两个页面都用它
assets/
截图、视频片段和配音
embed.js
弹窗按钮的脚本

交给 AI 来做

如果你的网站是用 AI 助手（Claude、Cursor、ChatGPT…）做的，复制下面这段，填好空白，交给它就行。

请在我的网站里嵌入一个交互式产品演示。

我的网站是用这个做的：____（比如 Next.js、WordPress、Webflow）
放在哪里：____（比如首页主视觉下方）

这个演示是用 MakeMeDemo 做的、已经托管好的一个文件夹。先显示 poster.jpg 和一个播放按钮；只有点击后，才换成 player.html 的 iframe（宽 100%、宽高比 16:10、无边框、允许全屏），这样页面打开时不会先加载演示。直接链接到文件原来的地址，不要把文件复制进我的项目。文件夹如下：

https://your-site.com/demos/my-demo/
  index.html   完整页面，分享链接打开的就是它
  player.html  只有播放器，自动适应放它的框，给 iframe 用
  poster.jpg   演示的第一帧，用作封面或链接预览图
  demo.json    演示本身：步骤、文字和设置
  player.js    播放器代码，上面两个页面都用它
  assets/      截图、视频片段和配音
  embed.js     弹窗按钮的脚本