如何不添加额外div与HTML代码嵌入Instagram视频

云原生阿岚

2026-10-2

Instagram嵌入仅展示视频部分的实现方法

方法1：调整官方嵌入属性（最简便）

你当前使用的嵌入代码中包含data-instgrm-captioned属性，该属性的作用是强制加载帖子配文模块，直接删除该属性即可隐藏配文内容。
修改后的基础嵌入代码示例：

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/CUSwegHpSXB/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="13"></blockquote>
<script async src="https://www.instagram.com/embed.js"></script>

方法2：添加自定义规则隐藏多余UI

如果还需要隐藏发布者头部栏、底部互动按钮等非视频内容，可以通过两种方式实现：

若你可以控制嵌入生成的iframe参数，可在iframe的src末尾添加&hide_header=true&hide_footer=true&caption=false参数，即可直接隐藏非视频模块
若使用官方默认渲染逻辑，可添加全局CSS样式覆盖官方样式（仅当嵌入内容渲染在主文档DOM中时生效，跨域iframe场景不适用）：

/* 隐藏头部用户信息 */
.instagram-media-header {
  display: none !important;
}
/* 隐藏底部互动、配文、信息模块 */
.instagram-media-cta,
.instagram-media-meta,
.instagram-media-caption,
.instagram-media-comments {
  display: none !important;
}
/* 调整视频容器边距适配你的站点风格 */
.instagram-media-video-wrapper {
  padding: 0 !important;
  border: none !important;
}