CODEWITHSUNDEEP
javascriptreactjsyoutubecontextmenureact-player
Osada
Osada

Reputation: 80

How to disable YouTube context menu in react player (reactjs)?

I've Implemented the react player within a react js site it works fine I can embed video from Vimeo, youtube, and lots of other platforms. Now I need to hide or disable the context menu of youtube videos inside the react player. I made a change as below,

<ReactPlayer
              url={videoLink}
              controls={true}
              pip={true}
              className="player"
              width="100%"
              height="100%"
              playing={true}
              controls={true}
              onContextMenu={(e) => e.preventDefault()}
              config={{
                youtube: {
                  playerVars: {
                    modestbranding: 1,
                    fs: 0,
                  },
                },
              }}
            />

after adding onContextMenu={(e) => e.preventDefault()} I was able to disable the context menu but I can still access the youtube context menu. so how I can disable the youtube context menu within react player.

Upvotes: 1

Views: 5920

Answers (1)

idk wut to put here
idk wut to put here

Reputation: 805

I don't think you can do this.

  • YouTube uses its own JavaScript to overwrite the right click menu.
  • You will get SecurityError if you try to access the frame because the _top place is different from youtube.com.
  • Try using contentWindow to disable the JavaScript context menu. In a perfect world, this should work.
var youtube = document.getElementById('yourYoutubeFrame');
youtube = youtube.contentWindow;
youtube.oncontextmenu = function(e) {
  e.preventDefault();
  console.log("Blocked!");
}
  • Try it out, you will recieve a message that the browser blocked a frame with origin yoursite.com from accessing a frame with origin youtube-nocookie.com.

Upvotes: 2

Related Questions