为何CSS无法隐藏嵌入YouTube播放器的“更多视频”弹窗？求解决方案

核心问题在于跨域安全限制：你嵌入的YouTube播放器是独立的iframe，属于youtube.com域名，而你的LibGuides页面是另一个域名。浏览器的同源策略会阻止主页面的CSS修改iframe内部的DOM元素——这就是.videowall-endscreen完全无效的原因。

至于你之前生效的.ytp-pause-overlay-container，大概率是LibGuides平台自身添加的外层暂停覆盖元素，而非YouTube iframe内部的组件，所以主页面CSS能影响它。

下面给你两种可行的解决方法，适配LibGuides环境：

方法一：使用YouTube IFrame API（推荐） #

通过官方API可以直接控制播放器行为，避开跨域限制，还能自定义结束后的展示内容：

<script>
  // 加载YouTube IFrame API
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    // 初始化播放器，替换成你的视频ID
    player = new YT.Player('yt-player-container', {
      videoId: '你的视频ID',
      playerVars: {
        'rel': 0, // 仅显示同频道推荐（目前无法完全关闭推荐，但能缩小范围）
        'modestbranding': 1, // 隐藏YouTube标识
        'showinfo': 0
      },
      events: {
        'onStateChange': handleVideoStateChange
      }
    });
  }

  function handleVideoStateChange(event) {
    // 监听视频结束事件（状态码0）
    if (event.data === 0) {
      // 尝试直接隐藏结束屏（部分场景可能因跨域失败，所以做容错）
      try {
        var endscreen = event.target.getIframe().contentDocument.querySelector('.videowall-endscreen');
        if (endscreen) endscreen.style.display = 'none';
      } catch(e) {
        // 跨域限制生效时，显示自定义覆盖层挡住结束屏
        document.getElementById('custom-end-overlay').style.display = 'flex';
      }
    }
  }
</script>

<!-- 播放器容器，带自定义结束覆盖层 -->
<div style="position: relative; width: 560px; height: 315px;">
  <div id="yt-player-container"></div>
  <!-- 自定义结束覆盖层，默认隐藏 -->
  <div id="custom-end-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: none; flex-direction: column; justify-content: center; align-items: center;">
    <p>视频播放完毕</p>
    <button onclick="player.playVideo()" style="padding: 8px 16px; cursor: pointer;">重新播放</button>
  </div>
</div>

方法二：纯CSS裁剪（无脚本，简单但不完美） #

如果LibGuides限制添加自定义脚本，可以通过外层容器裁剪iframe的方式隐藏结束屏：

<div style="width: 560px; height: 315px; overflow: hidden; position: relative;">
  <iframe 
    width="560" 
    height="350" 
    src="https://www.youtube.com/embed/你的视频ID?rel=0" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    style="position: absolute; top: 0; left: 0;"
  ></iframe>
</div>

原理是把iframe的高度设得比外层容器高，让底部的结束屏部分被容器的overflow: hidden裁掉。你可以微调iframe的height数值，找到既能隐藏结束屏又不影响播放器控制栏的平衡点。

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