Why my right click is not disabled according to the doc? Also, I don't see the pip option in player controls or the quality option in the settings
my code:
import PlyrComponent from "plyr-react";
import "plyr-react/plyr.css"; // Import your custom CSS file for styling
const VideoPlayer = ({ videoUrl }) => {
// Regular expression to extract video ID from YouTube URL
const regex =
/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
// Extract video ID from the URL
const match = videoUrl.match(regex);
const videoId = match ? match[1] : null;
return (
<div className="video-player min-w-80 md:min-w-[600px] lg:min-w-[700px] xl:min-w-[1000px] 2xl:min-w-[1000px]">
{videoId ? (
<PlyrComponent
source={{
type: "video",
sources: [
{
src: videoId,
provider: "youtube",
},
],
}}
options={{
controls: [
"play-large", // Add a large play button
"play", // Play button
"progress", // Progress bar
"current-time", // Current time
"mute", // Mute button
"volume", // Volume control
"captions", // Captions/subtitles button
"settings", // Settings button
"pip", // Picture-in-picture mode button
"airplay", // Airplay button
"fullscreen", // Fullscreen button
],
settings:[
'quality',
'speed',
],
quality:{
default: 1080,
},
disableContextMenu: true,
clickToPlay: true,
youtube: {
disableKeyboard: false,
playsinline: false,
modestBranding: true,
cc_load_policy: 0,
iv_load_policy: 3,
rel: 0,
showinfo: 0,
controls:0
},
}}
/>
) : (
<p>Invalid YouTube URL</p>
)}
</div>
);
};
export default VideoPlayer;
Why my right click is not disabled according to the doc? Also, I don't see the pip option in player controls or the quality option in the settings
my code: