How to remove "More Videos" in embedded youtube while paused

user_18924349 0
Viewed 571

When an embedded video is paused, YouTube will display a menu with "More Videos". I tried "$('.ytp-expand-pause-overlay .ytp-pause-overlay').css('display','none');" but it doesn't work. May I know how to disable the "More Videos" feature?

Here is the source code:

<iframe id="videoplayer"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&color=white&showinfo=0&ecver=2&rel=0&modestbranding=1&origin="
        frameborder="0"
        style="border: solid 4px #37474F">
</iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'videoplayer';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('videoplayer', 
        {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
    
  function onPlayerReady(event) {
    document.getElementById('videoplayer').style.borderColor = '#FF6D00';
    $('.ytp-expand-pause-overlay .ytp-pause-overlay').css('display','none');
  }
    

  function onPlayerStateChange(event) {
    document.getElementById('videoplayer').style.borderColor = '#37474F';  
  }

</script>
youtube-api
1 Answers

Could you use playerVars for this? Documentation

 <script type="text/javascript">
      const tag = document.createElement("script");

      tag.id = "videoplayer";
      tag.src = "https://www.youtube.com/iframe_api";

      const firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      let player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player("videoplayer", {
          height: "360",
          width: "640",
          playerVars: {
            autoplay: 1,
            controls: 0,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            modestbranding: 1,
            rel: 0, // <--- I think this is the option you're looking for
            showinfo: 0,
            ecver: 2,
            origin: "",
          },
          events: {
            onReady: onPlayerReady(),
            onStateChange: onPlayerStateChange(),
          },
        });
      }

      function onPlayerReady(event) {
        document.getElementById("videoplayer").style.borderColor = "#FF6D00";
      }

      function onPlayerStateChange(event) {
        document.getElementById("videoplayer").style.borderColor = "#37474F";
      }
    </script>
user_120073070
Related