YouTube背景视频loop属性失效求助（附登录页实现代码）

问题根源 #

YouTube嵌入iframe时，单独设置loop=1无法触发循环播放，必须同时搭配playlist参数，且参数值需与当前视频ID完全一致，这是YouTube嵌入规则的强制要求。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
  <style>
    body {
      margin: 0;
    }

    .login-info p {
      margin-bottom: -13px;
    }

    .login-details {
      position: fixed;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .background {
      position: fixed;
      z-index: -99;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .background iframe {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      border: 0;
    }
  </style>
</head>
<body>
  <div class="background">
    <!-- 核心修改：添加playlist参数，值为视频ID -->
    <iframe src="https://www.youtube.com/embed/-MKapbz0GIo?loop=1&autoplay=1&mute=1&controls=0&showinfo=0&autohide=1&playlist=-MKapbz0GIo"></iframe>
  </div>
  <div class="login-details">
    <form method="post" class="login-info">
      <p>Email:</p><br>
      <input id="Name" type="email" name="email" required> <br>
      <p>Password:</p><br>
      <input id="Password" type="password" name="password" required><br><br>
      <input type="submit" value="Submit">
    </form>
  </div>
</body>
</html>

关键调整点 #

• 循环功能修复：新增playlist=-MKapbz0GIo参数，与视频ID匹配，确保循环生效
• 登录框优化：调整位置为右侧固定，添加半透明背景和阴影，提升视频背景上的可读性
• 视频适配优化：使用object-fit: cover让视频充满整个容器，避免黑边；用vw/vh单位确保全屏显示
• 代码简化：required="required"简化为required，符合HTML5标准

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