如何实现Bootstrap模态框嵌入YouTube视频并全平台全屏自动播放

以下是具体的实现方案，涵盖PC端和移动端的全屏自动播放需求，尤其是移动端横屏全屏效果：

一、核心思路 #

1. 用YouTube IFrame Player API控制视频的播放、全屏状态，这是实现精确控制的唯一可靠方式
2. 自定义模态框作为视频容器，点击按钮触发模态框显示并初始化视频
3. 针对移动端配置播放器参数，强制视频进入全屏（自动横屏）
4. 通过用户交互触发自动播放，规避浏览器的自动播放限制

二、完整代码实现 #

1. HTML结构 #

<!-- 视频播放触发按钮 -->
<button id="playVideoBtn">播放视频</button>

<!-- 视频模态框 -->
<div id="videoModal" class="modal">
  <div class="modal-content">
    <!-- 关闭按钮 -->
    <button id="closeModalBtn" class="close-btn">&times;</button>
    <!-- YouTube播放器容器 -->
    <div id="videoContainer"></div>
  </div>
</div>

2. CSS样式 #

/* 模态框遮罩层 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

/* 模态框内容区 */
.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}

/* 视频容器适配 */
#videoContainer {
  width: 90%;
  max-width: 1200px;
  height: 80vh;
}

3. JavaScript逻辑（核心） #

let youtubePlayer;
const modal = document.getElementById('videoModal');
const playBtn = document.getElementById('playVideoBtn');
const closeBtn = document.getElementById('closeModalBtn');
const videoContainer = document.getElementById('videoContainer');

// 动态加载YouTube IFrame API
function loadYouTubeAPI() {
  const scriptTag = document.createElement('script');
  scriptTag.src = "https://www.youtube.com/iframe_api";
  const firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(scriptTag, firstScript);
}

// API加载完成后初始化（由YouTube自动调用）
function onYouTubeIframeAPIReady() {
  // 此处暂不创建播放器，等待用户点击触发
}

// 点击播放按钮：显示模态框+初始化播放器
playBtn.addEventListener('click', () => {
  modal.style.display = 'block';
  
  // 创建YouTube播放器实例
  youtubePlayer = new YT.Player('videoContainer', {
    videoId: '替换为你的YouTube视频ID', // 示例："dQw4w9WgXcQ"
    width: '100%',
    height: '100%',
    playerVars: {
      'autoplay': 1,          // 自动播放
      'playsinline': 0,       // 移动端禁止内联播放，强制全屏（自动横屏）
      'allowfullscreen': 1,   // 允许全屏
      'fs': 1,                // 显示全屏按钮
      'rel': 0                // 播放结束后不显示相关视频
    },
    events: {
      'onReady': handlePlayerReady // 播放器就绪后触发全屏
    }
  });
});

// 播放器就绪：触发全屏
function handlePlayerReady(event) {
  const iframeElement = event.target.getIframe();
  // 兼容不同浏览器的全屏API
  if (iframeElement.requestFullscreen) {
    iframeElement.requestFullscreen();
  } else if (iframeElement.mozRequestFullScreen) {
    iframeElement.mozRequestFullScreen();
  } else if (iframeElement.webkitRequestFullscreen) {
    iframeElement.webkitRequestFullscreen();
  } else if (iframeElement.msRequestFullscreen) {
    iframeElement.msRequestFullscreen();
  }
}

// 关闭模态框：停止视频+销毁播放器
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
  if (youtubePlayer) {
    youtubePlayer.stopVideo();
    youtubePlayer.destroy();
    youtubePlayer = null;
  }
});

// 点击模态框遮罩层关闭
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    closeBtn.click();
  }
});

// 初始化加载API
loadYouTubeAPI();

三、关键注意事项 #

• 视频ID替换：将代码中的替换为你的YouTube视频ID换成实际视频的ID（即YouTube链接中v=后面的字符串）
• 移动端横屏实现：核心是playsinline: 0参数，该参数会让iOS/Android设备强制视频进入系统级全屏模式，自动切换为横屏
• 自动播放限制：所有现代浏览器要求自动播放必须在用户主动交互（如点击按钮）的上下文内触发，因此不能在页面加载时自动播放
• 全屏API兼容：不同浏览器的全屏方法前缀不同，代码中已做兼容处理
• 内存优化：关闭模态框时销毁播放器实例，避免内存泄漏

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