网站嵌入Youtube/Vimeo视频：点击实现居中放大或全屏播放方案

Hey there! Let's build that grid gallery for YouTube and Vimeo videos with modal playback and direct fullscreen on click. I'll walk you through a complete, working solution with HTML, CSS, and JavaScript:

First, set up your grid container and video items. We'll use iframes for embedding, with necessary API parameters to control playback:

<!-- Grid Gallery Container -->
<div class="video-grid">
  <!-- YouTube Video -->
  <div class="video-item" data-video-type="youtube" data-video-id="YOUR_YOUTUBE_VIDEO_ID">
    <iframe 
      src="https://www.youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID?enablejsapi=1&rel=0" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen
      class="video-iframe"
    ></iframe>
  </div>

  <!-- Vimeo Video -->
  <div class="video-item" data-video-type="vimeo" data-video-id="YOUR_VIMEO_VIDEO_ID">
    <iframe 
      src="https://player.vimeo.com/video/YOUR_VIMEO_VIDEO_ID?api=1&background=0" 
      frameborder="0" 
      allow="autoplay; fullscreen; picture-in-picture" 
      allowfullscreen
      class="video-iframe"
    ></iframe>
  </div>

  <!-- Add more video items as needed -->
</div>

<!-- Modal for Centered Playback -->
<div class="video-modal" id="videoModal">
  <div class="modal-content">
    <div class="modal-video-container" id="modalVideoContainer"></div>
  </div>
</div>

Style the grid layout and modal to create the gallery and centered playback overlay:

/* Grid Gallery Styles */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.video-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-iframe {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 90%;
  max-width: 1200px;
  position: relative;
}

.modal-video-container iframe {
  width: 100%;
  height: 600px;
  border: none;
}

/* Show modal when active */
.video-modal.active {
  display: flex;
}

We'll use the official YouTube and Vimeo APIs to control playback, modal behavior, and fullscreen. First load the API scripts, then add the logic:

<!-- Load YouTube API -->
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Load Vimeo Player API -->
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
// Modal elements
const modal = document.getElementById('videoModal');
const modalVideoContainer = document.getElementById('modalVideoContainer');
let currentPlayer = null;

// Handle video item clicks
document.querySelectorAll('.video-item').forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    const videoType = item.dataset.videoType;
    const videoId = item.dataset.videoId;

    // Clear existing video in modal
    modalVideoContainer.innerHTML = '';

    // Initialize player based on video type
    if (videoType === 'youtube') {
      createYoutubePlayer(videoId);
    } else if (videoType === 'vimeo') {
      createVimeoPlayer(videoId);
    }

    // Show modal
    modal.classList.add('active');
  });
});

// Create YouTube player with fullscreen trigger
function createYoutubePlayer(videoId) {
  currentPlayer = new YT.Player(modalVideoContainer, {
    videoId: videoId,
    events: {
      'onReady': (event) => {
        // Play video and launch fullscreen
        event.target.playVideo();
        requestFullscreen(event.target.getIframe());
      }
    }
  });
}

// Create Vimeo player with fullscreen trigger
function createVimeoPlayer(videoId) {
  const iframe = document.createElement('iframe');
  iframe.src = `https://player.vimeo.com/video/${videoId}?api=1&autoplay=1`;
  iframe.allowFullscreen = true;
  modalVideoContainer.appendChild(iframe);

  currentPlayer = new Vimeo.Player(iframe);
  currentPlayer.on('ready', () => {
    // Trigger fullscreen via Vimeo API
    currentPlayer.requestFullscreen().catch(err => {
      console.error('Fullscreen request failed:', err);
    });
  });
}

// Cross-browser fullscreen helper
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Close modal when clicking outside video content
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    // Pause and clean up current player
    if (currentPlayer) {
      if (currentPlayer.pauseVideo) { // YouTube
        currentPlayer.pauseVideo();
      } else if (currentPlayer.pause) { // Vimeo
        currentPlayer.pause();
      }
      currentPlayer = null;
    }

    // Exit fullscreen if active
    if (document.fullscreenElement) {
      document.exitFullscreen();
    }

    // Hide modal
    modal.classList.remove('active');
  }
});
</script>

• API Parameters: We add enablejsapi=1 (YouTube) and api=1 (Vimeo) to enable programmatic control of the players.
• Fullscreen Handling: YouTube uses direct iframe fullscreen requests, while Vimeo has an official API method for this.
• Modal Cleanup: Clicking outside the video pauses playback, exits fullscreen, and hides the modal automatically.
• Responsiveness: The grid adapts to screen sizes, and the modal uses a percentage-based width for mobile-friendly viewing.

Just replace YOUR_YOUTUBE_VIDEO_ID and YOUR_VIMEO_VIDEO_ID with your actual video IDs, and you're all set!

内容的提问来源于stack exchange，提问作者coco_mo-jo