Skip to content

The properties are not working  #1138

Description

@sadiq-farhan

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions