如何用JavaScript或HTML调整YouTube iframe全屏显示为横屏？

由于浏览器同源策略限制，无法直接修改YouTube iframe内部的样式，且原生全屏逻辑会优先控制视频缩放。以下是两种可行的实现方案：

方法1：自定义全屏容器替代原生iframe全屏 #

通过外层容器接管全屏逻辑，用CSS旋转视频实现横屏显示，同时避免拉伸：

1. HTML结构

<div class="youtube-wrapper">
  <iframe id="yt-player" src="你的YouTube视频嵌入链接" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
  <button class="toggle-fullscreen">全屏</button>
</div>

2. 核心CSS

.youtube-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.youtube-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持视频原始比例 */
}

/* 全屏状态下的容器样式 */
.youtube-wrapper:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.youtube-wrapper:fullscreen iframe {
  width: auto;
  height: 100vh;
  transform: rotate(90deg); /* 旋转视频为横屏 */
  transform-origin: center;
}

/* 兼容webkit内核浏览器 */
.youtube-wrapper:-webkit-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.youtube-wrapper:-webkit-full-screen iframe {
  width: auto;
  height: 100vh;
  transform: rotate(90deg);
  transform-origin: center;
}

3. JavaScript控制全屏切换

const wrapper = document.querySelector('.youtube-wrapper');
const fullscreenBtn = document.querySelector('.toggle-fullscreen');

fullscreenBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    wrapper.requestFullscreen().catch(err => {
      console.error('全屏请求失败:', err);
    });
  } else {
    document.exitFullscreen();
  }
});

方法2：结合YouTube Player API精准控制 #

通过官方API监听全屏状态，配合CSS实现更稳定的横屏效果：

1. 引入API并初始化播放器

<script src="https://www.youtube.com/iframe_api"></script>
<div class="youtube-wrapper">
  <div id="yt-player"></div>
  <button class="toggle-fullscreen">全屏</button>
</div>

let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('yt-player', {
    videoId: '你的视频ID',
    width: '100%',
    height: '100%',
    events: {
      'onStateChange': handlePlayerState
    }
  });
}

function handlePlayerState(event) {
  const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
  if (isFullscreen) {
    // 配合方法1的CSS旋转逻辑，或调整视频播放参数
    player.setPlaybackQuality('hd720');
  }
}

关键注意事项 #

• 同源限制：直接修改iframe内部DOM或样式会被浏览器阻止，必须通过外层容器或官方API实现。
• 交互适配：视频旋转后，鼠标点击位置会同步旋转，若需优化交互，可通过容器事件代理处理。
• 浏览器兼容：需添加-webkit-前缀适配Chrome、Safari等webkit内核浏览器。

内容的提问来源于stack exchange，提问作者Brahm Bind Singh