Added ability to set disableRemotePlayback

Author: anurag2787

docs/pages/cldvideoplayer/configuration.mdx

@@ -299,6 +299,13 @@ import Table from '../../components/Table';
       description: (<span><strong>Check Cloudinary Video Player Api Docs</strong></span>),
       example: (<span><strong>Check Cloudinary Video Api Docs</strong></span>)
     },
+    {
+      prop: 'disableRemotePlayback',
+      type: 'boolean',
+      default: 'false',
+      description: 'Disable the ability to use remote playback (cast video) on the video element',
+      example: () => (<code>true</code>)
+    },
     {
       prop: 'loop',
       type: 'boolean',

docs/pages/cldvideoplayer/examples.mdx

@@ -111,6 +111,34 @@ Utilizes the browser's Picture-in-Picture API to create a floating video on top
   ```
 </CodeBlock>
 
+### Disable Remote Playback
+
+Prevents the video from being cast to remote devices by disabling the remote playback feature.
+
+<HeaderImage>
+  <CldVideoPlayer
+    id="disable-remote-playback"
+    width="2048"
+    height="1080"
+    src={`${process.env.VIDEOS_DIRECTORY}/dog-running-snow`}
+    disableRemotePlayback
+  />
+</HeaderImage>
+
+<CodeBlock>
+  ```jsx copy showLineNumbers
+  import { CldVideoPlayer } from 'next-cloudinary';
+
+  <CldVideoPlayer
+    id="disable-remote-playback"
+    width="1620"
+    height="1080"
+    src="<Your Public ID>"
+    disableRemotePlayback
+  />
+  ```
+</CodeBlock>
+
 ## Player Customization
 
 ### Chapters & Selector

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx

@@ -17,6 +17,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
   const {
     className,
     config,
+    disableRemotePlayback,
     height,
     id,
     onDataLoad,
@@ -134,6 +135,7 @@ const CldVideoPlayer = (props: CldVideoPlayerProps) => {
           className={playerClassName}
           width={width}
           height={height}
+          disableRemotePlayback={disableRemotePlayback}
         />
         <Script
           id={`cloudinary-videoplayer-${playerId}`}

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.types.ts

@@ -11,6 +11,7 @@ import { GetCldVideoUrlOptions } from '../../helpers/getCldVideoUrl';
 export type CldVideoPlayerProps = Omit<GetVideoPlayerOptions, "cloud_name" | "autoplayMode" | "publicId" | "secure" | "showLogo" | "logoImageUrl" | "logoOnclickUrl"> & {
   className?: string;
   config?: ConfigOptions;
+  disableRemotePlayback?: boolean;
   id?: string;
   logo?: boolean | CldVideoPlayerPropsLogo;
   onDataLoad?: Function;