如何用JavaScript实现YouTube播放时静音嵌入式MP4（WordPress场景）

Let's break this down into practical steps that fit your WordPress setup and Flickity carousel modal workflow.

1. Load the YouTube IFrame Player API #

First, we need YouTube's official API to detect when the video starts playing. Add this script to your site (you can include it via your theme's functions.php using wp_enqueue_script, or use a custom JS plugin like Code Snippets):

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

2. Custom JavaScript Logic #

This code handles detecting when the YouTube modal opens, initializing the player, and muting your background MP4 when the video starts playing. Be sure to adjust the selectors to match your site's actual elements:

// Store references to key elements (update these selectors for your site)
let backgroundMP4 = document.querySelector('#home-bg-video'); // Replace with your MP4's ID/class
let youtubePlayer;
const modalSelector = '.flickity-modal-container'; // Replace with your modal's selector
const youtubeIframeSelector = '.flickity-modal iframe[src*="youtube.com"]'; // Your YouTube iframe selector

// Initialize YouTube player when modal opens
document.addEventListener('DOMContentLoaded', function() {
  // Listen for carousel slide clicks that open the modal
  document.querySelectorAll('.flickity-slide').forEach(slide => {
    slide.addEventListener('click', function() {
      // Wait a moment for the modal to load the YouTube iframe
      setTimeout(() => {
        const youtubeIframe = document.querySelector(youtubeIframeSelector);
        if (youtubeIframe && !youtubePlayer) {
          // Initialize the YouTube player with state change listener
          youtubePlayer = new YT.Player(youtubeIframe.id, {
            events: {
              'onStateChange': onPlayerStateChange
            }
          });
        }
      }, 500); // Adjust timeout if your modal loads faster/slower
    });
  });

  // Optional: Unmute MP4 when modal closes (if desired)
  document.querySelector(modalSelector).addEventListener('close', function() {
    if (backgroundMP4) {
      backgroundMP4.muted = false;
      // Update your custom audio toggle button's UI here if needed
      // document.querySelector('.audio-toggle-btn').classList.remove('active');
    }
  });
});

// Handle YouTube player state changes
function onPlayerStateChange(event) {
  // Mute MP4 when YouTube video starts playing
  if (event.data === YT.PlayerState.PLAYING) {
    if (backgroundMP4) {
      backgroundMP4.muted = true;
      // Sync your custom audio switch UI to show muted state
      // document.querySelector('.audio-toggle-btn').classList.add('active');
    }
  }

  // Optional: Unmute MP4 when YouTube pauses/stops
  // else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
  //   if (backgroundMP4) backgroundMP4.muted = false;
  // }
}

Key Adjustments for Your Site: #

• Update Selectors: Replace placeholder IDs/classes (like #home-bg-video) with the actual ones from your theme. Use your browser's DevTools (right-click > Inspect) to find these.
• Modal Open Event: If your modal uses a custom trigger (e.g., a modal-open JS event instead of slide clicks), adjust the event listener to match.
• Custom Audio Switch: If your background MP4 has a UI toggle button for audio, uncomment and tweak the lines that update its state to keep the UI in sync with the video's muted status.
• Timeout Tweak: The 500ms delay gives the modal time to load the YouTube iframe. If your modal loads instantly, you can reduce this or remove it entirely.

Quick Testing Tips: #

1. Open your site in a browser and check the console (F12 > Console) for any errors.
2. Verify the YouTube player initializes correctly by logging youtubePlayer in the console after opening the modal.
3. Confirm the background MP4 element is being selected by checking backgroundMP4 in the console.

Content of the question originates from Stack Exchange, question author Cameron Elliott