Markdown 自适应尺寸的 YouTube 视频

Table of contents

预览

这是一个自适应尺寸的 YouTube 视频，适用于电脑端和手机端：

使用说明

1. 复制步骤：

   • 直接复制以上全部内容（从 --- 开始到最后）。
   • 粘贴到您的 Markdown 文件（建议命名为 adaptive-youtube-embed.md）。
   • 保存到您的博客框架的内容目录（例如 Astro 的 content/ 或 Hugo 的 content/posts/）。

2. 测试步骤：

   • 运行您的博客框架（如 astro build 或 hugo server）。
   • 检查是否还有 data does not match collection schema 错误。
   • 预览页面，确认视频在电脑端和手机端是否铺满容器且无溢出。
   • 确保浏览器启用 JavaScript，以避免“An error occurred”提示。

3. 可能的问题及解决方法：

   • Schema 错误：如果仍出现 data does not match collection schema，请提供您的博客框架（如 Astro、Hugo、Jekyll）及配置文件内容，我可以检查是否需要额外字段或特定格式。
   • 溢出问题：如果手机端仍有溢出，检查父容器是否有 CSS 干扰（如固定宽度）。您可以提供设备信息（浏览器、屏幕分辨率）或截图，我会进一步优化。
   • 视频无法播放：访问 https://www.youtube.com/embed/dXIyMS61B68 确认视频是否可嵌入。如果不可用，可能需要更换视频。

如果复制后仍有问题，或您无法复制，请告诉我具体错误（如复制时的提示）或您的博客框架详情，我会提供更精确的解决方案！

代码

<div
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; width: 100%; margin: 0 auto; box-sizing: border-box;"
>
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/dXIyMS61B68"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>