如何让iframe仅展示目标页面的指定区域？

方法一：容器嵌套+定位裁剪（最常用） #

核心思路是用带overflow:hidden的容器包裹iframe，通过偏移iframe让目标区域刚好落在容器可视范围内，再通过媒体查询适配不同终端。

1. 获取目标区域参数
   打开源页面，用浏览器开发者工具（F12）定位视频元素，分别在PC和移动端模式下记录它的offsetTop（距页面顶部距离）和自身宽高。

2. 编写代码实现
   用容器固定可视区域尺寸，iframe设置足够大的宽高，通过transform偏移到目标位置：

   <div class="iframe-wrapper">
     <iframe src="https://www.cxtv.com.br/tv-ao-vivo/rede-brasil-de-televisao-rbtv" frameborder="0"></iframe>
   </div>
   

   .iframe-wrapper {
     /* 移动端用相对单位适配 */
     width: 85vw;
     height: 48vw; /* 保持视频16:9比例 */
     overflow: hidden;
     margin: 0 auto;
   }
   
   .iframe-wrapper iframe {
     width: 100%;
     height: 150%; /* 足够大的高度确保能偏移到目标区域 */
     transform: translateY(-130px); /* 移动端视频区域偏移值，需实际测量调整 */
   }
   
   /* PC端媒体查询，单独设置尺寸和偏移 */
   @media (min-width: 1024px) {
     .iframe-wrapper {
       width: 920px;
       height: 518px;
     }
     .iframe-wrapper iframe {
       height: 120%;
       transform: translateY(-210px); /* PC端视频区域偏移值，需实际测量调整 */
     }
   }
   

方法二：直接使用视频单独嵌入地址 #

如果源页面的视频有独立嵌入链接或视频流地址，直接用这个地址作为iframe的src，就能避免裁剪整个页面，适配性更好：

1. 打开源页面开发者工具，找到<video>标签，复制它的src属性值；
2. 将该地址替换iframe的src，此时iframe只会加载视频内容，自动适配多端。

方法三：JS动态适配复杂布局 #

如果源页面响应式逻辑复杂，不同终端的视频位置变化无固定断点，可通过JS监听窗口尺寸变化，动态调整iframe偏移：

function adjustIframe() {
  const iframe = document.querySelector('.iframe-wrapper iframe');
  const isMobile = window.innerWidth < 768;
  // 根据设备类型设置对应偏移值
  const topOffset = isMobile ? '-130px' : '-210px';
  iframe.style.transform = `translateY(${topOffset})`;
}

// 初始化和窗口resize时触发调整
window.addEventListener('load', adjustIframe);
window.addEventListener('resize', adjustIframe);

注意事项 #

• 跨域限制：确保目标网站允许嵌入（当前你已成功加载，说明无此问题）；
• 页面变更：若目标网站修改布局，需重新测量偏移值并调整代码。

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