如何使youtube <iframe>中的视频在向下滚动html时消失

要使YouTube <iframe>中的视频在向下滚动HTML时消失，可以通过以下步骤实现：

使用CSS将<iframe>元素的位置设置为固定定位（fixed），这样它将相对于浏览器窗口的视口位置固定不动。
使用JavaScript监听滚动事件，并在滚动时检测<iframe>元素是否在视口中可见。
如果<iframe>元素在视口中可见，则将其隐藏（例如，通过设置display属性为none）；否则，将其显示出来（例如，通过设置display属性为block）。

下面是一个示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <style>
    #video-frame {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
    }
  </style>
</head>
<body>
  <div id="content">
    <!-- 其他页面内容 -->
  </div>
  <iframe id="video-frame" src="https://www.youtube.com/embed/视频ID" frameborder="0" allowfullscreen></iframe>
  <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）：

window.addEventListener('scroll', function() {
  var videoFrame = document.getElementById('video-frame');
  var content = document.getElementById('content');
  var rect = content.getBoundingClientRect();
  
  if (rect.top < window.innerHeight && rect.bottom >= 0) {
    videoFrame.style.display = 'none';
  } else {
    videoFrame.style.display = 'block';
  }
});

在上述代码中，我们首先将<iframe>元素的位置设置为固定定位，并将其初始显示状态设置为none，即隐藏状态。然后，使用JavaScript监听滚动事件，并获取页面内容区域（id为"content"的元素）的位置信息（getBoundingClientRect()方法）。根据内容区域的位置信息，判断<iframe>元素是否在视口中可见，如果可见，则将其隐藏，否则显示出来。

请注意，这只是一个简单的示例代码，具体实现可能需要根据实际情况进行调整。另外，由于涉及到YouTube视频的嵌入，建议在使用时遵守相关的法律和政策规定。