如何设置Youtube iframe内嵌播放器为100%宽高？CSS无效求助

核心原因 #

浏览器的同源策略禁止父页面直接访问跨域iframe（Youtube域名与你的网站域名不同）内部的DOM元素，所以你之前编写的.content iframe video选择器完全无法生效。

可行解决方案 #

方案1：通过iframe属性+CSS实现自适应填满

无需操作内部元素，直接调整iframe本身的设置即可实现视频自适应容器：

1. 给iframe标签添加width="100%"和height="100%"属性
2. 给iframe设置CSS，强制它填满目标容器：

.content iframe {
  width: 100vw;
  height: 100vh; /* 替换为你需要的高度值 */
  border: none; /* 移除默认边框 */
}

3. 在Youtube嵌入URL末尾追加&fs=1参数，确保视频能自适应iframe尺寸。

如果需要保持视频原始比例（避免拉伸变形），可以使用aspect-ratio属性：

.content iframe {
  width: 100vw;
  aspect-ratio: 16/9; /* Youtube默认视频比例 */
  height: auto;
}

方案2：使用Youtube Player API控制视频尺寸

如果需要精确控制视频元素尺寸，可借助Youtube官方Player API绕过同源限制：

1. 加载Youtube Player API脚本：

<script src="https://www.youtube.com/iframe_api"></script>

2. 初始化播放器并设置尺寸：

function onYouTubeIframeAPIReady() {
  const player = new YT.Player('your-iframe-id', {
    width: '100vw',
    height: '100vh',
    videoId: 'your-video-id', // 替换为你的视频ID
    events: {
      'onReady': function(e) {
        // 播放器就绪后可再次调整尺寸
        e.target.setSize(window.innerWidth, window.innerHeight);
      }
    }
  });
}

方案3：容器包裹+缩放（强制填满，可能拉伸/裁剪）

如果不在乎视频比例，只想强制填满容器，可用带overflow: hidden的容器包裹iframe并缩放：

.video-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1); /* 缩放iframe让视频填满容器 */
  width: 100%;
  height: 100%;
}

注意：该方法会裁剪视频边缘或拉伸画面，需根据需求选择。

内容的提问来源于stack exchange，提问作者goga goglika