Hey there! Let's break down why your autoplay stopped working after setting up responsive embedding, and walk through how to fix it. I’ve dealt with this exact problem a handful of times, so here’s what’s going on:

First, the Root Causes #

1. Browser Autoplay Policies: Modern browsers (Chrome, Firefox, Safari, etc.) have strict autoplay rules—videos will only autoplay automatically if they’re muted, or if the user has already interacted with your site (like clicking a button). Your original code used mute=0, which might have worked in some contexts, but the responsive layout change likely shifted the video’s loading context, triggering the policy enforcement.
2. Redundant HTML Nesting: You wrapped the iframe in a <p align="center"> tag, which is unnecessary here. Since .homevideo uses absolute positioning for the iframe, this extra wrapper doesn’t help with alignment and can introduce unexpected layout conflicts that interfere with playback.
3. YouTube Loop Limitation: The loop=1 parameter alone won’t make a single video loop—you need to add the playlist parameter with the same video ID to make it work properly.

The Fixed Solution #

Let’s update your code step by step:

Optimized HTML (Removed Redundant Wrapper & Updated Parameters)

<section id="embed">
  <div class="homevideo">
    <iframe 
      src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=1&loop=1&playlist=mUFAaEWb2_E&vq=hd1080"
      name="youtube embed"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen
    ></iframe>
  </div>
</section>

Tweaked CSS (Added Overflow Protection)

#embed { 
  height: auto; 
  text-align: center; 
  width: 100%; 
  max-width: 1000px; 
  margin: 0 auto; 
}
.homevideo { 
  position: relative; 
  padding-bottom: 56.25%; /* Maintains 16:9 aspect ratio for responsive sizing */
  height: 0; 
  overflow: hidden; /* Prevents any overflow issues on small screens */
}
.homevideo iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; /* Ensures no unwanted borders */
}

Key Changes Explained #

• mute=1: This satisfies browser autoplay policies, allowing the video to start automatically when the page loads.
• playlist=mUFAaEWb2_E: Works with loop=1 to make the single video repeat continuously (YouTube’s loop function requires this for solo videos).
• Removed <p> Tag: Cleans up the layout and eliminates potential conflicts with the absolute-positioned iframe.
• Added overflow: hidden: Ensures the video doesn’t spill outside its container on mobile devices.

What If You Need Autoplay with Sound? #

Unfortunately, browsers won’t allow unmuted autoplay without user interaction—it’s a built-in anti-intrusive measure. The workaround is to add a button that lets users trigger playback with sound:

<section id="embed">
  <button id="playWithSound" style="margin-bottom: 1rem;">Play Video with Sound</button>
  <div class="homevideo">
    <iframe 
      src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=0&mute=1&loop=1&playlist=mUFAaEWb2_E&vq=hd1080"
      name="youtube embed"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen
    ></iframe>
  </div>
</section>

<script>
document.getElementById('playWithSound').addEventListener('click', function() {
  const iframe = document.querySelector('.homevideo iframe');
  // Update the iframe source to enable sound and trigger playback
  iframe.src = iframe.src.replace('autoplay=0', 'autoplay=1').replace('mute=1', 'mute=0');
  // Hide the button after click (optional)
  this.style.display = 'none';
});
</script>

This gives users control while keeping your video responsive.

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