如何实现Wix iframe中视频的完整显示？

我之前也碰到过类似的iframe视频适配坑，给你几个实用的解决方案：

问题根源分析 #

你移除额外标签后，iframe的height="100%"会让它占满父容器的高度，但如果父容器没有明确的高度约束，它会直接拉伸到页面底部；而之前视频只显示一半，大概率是父容器设置了固定高度，导致iframe被截断。

解决方案1：固定高度适配（适合已知视频尺寸） #

如果你的视频是固定比例（比如常见的16:9），可以直接给iframe设置对应比例的高度值，替代100%：

<iframe width="100%" height="560px" name="htmlComp-iframe" src="https://www-ministerioselimlosangeles-net.filesusr.com/html/c6c2ba_7e10543906cc3e0dfef547110eb63f30.html"></iframe>

注意：560px是16:9比例下，宽度100%时的参考高度，你可以根据视频实际分辨率调整这个数值。

解决方案2：响应式比例容器（推荐适配全屏幕） #

这个方法能让视频在任何屏幕尺寸下都保持正确的宽高比，不会溢出也不会被截断，核心是用padding-top模拟比例：

<div style="position: relative; width: 100%; padding-top: 56.25%;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    name="htmlComp-iframe" 
    src="https://www-ministerioselimlosangeles-net.filesusr.com/html/c6c2ba_7e10543906cc3e0dfef547110eb63f30.html"
  ></iframe>
</div>

• padding-top: 56.25%对应16:9的视频比例（9÷16×100%），如果是4:3比例就改成75%。
• 外层容器用相对定位，iframe绝对定位后会完全填满容器，完美适配视频比例。

解决方案3：动态获取视频高度（适配可变高度视频） #

如果视频高度不固定，可以用JS动态获取iframe内部视频的实际高度，再设置iframe的高度：

const targetIframe = document.querySelector('iframe[name="htmlComp-iframe"]');
targetIframe.onload = function() {
  try {
    // 获取iframe内部的视频元素高度
    const videoActualHeight = targetIframe.contentWindow.document.querySelector('video').offsetHeight;
    targetIframe.style.height = `${videoActualHeight}px`;
  } catch (e) {
    console.log('跨域限制无法获取内部内容，建议使用前两种方案');
  }
};

注意：这个方法受浏览器跨域安全限制，如果iframe的源和当前页面域名不同，可能无法生效，优先推荐前两种方案。

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