Merge pull request #85 from Gyanreyer/fix/remove-crossorigin-default

Remove default "anonymous" value for crossOrigin prop
Gyanreyer · Oct 5, 2022 · 7dfab5f · 7dfab5f
2 parents 889d9f8 + b6b3f8d
commit 7dfab5f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -159,15 +159,17 @@ In practice this looks like:
 
 ### crossOrigin
 
-**Type**: `string` | **Default**: `"anonymous"`
+**Type**: `string` | **Default**: `null`
+
+The `crossOrigin` prop maps directly to the [HTML Video element's crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) and allows us to define how the video element should handle CORS requests. For most purposes, you should not need to worry about setting this, but if you are having trouble with CORS a good first step may be to try setting it to `"anonymous"`.
 
-The `crossOrigin` prop maps directly to the [HTML Video element's crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) and allows us to define how the video element should handle CORS requests. For most purposes, you should not need to worry about setting this. The acceptable values are:
+The acceptable values are:
 
-- `"anonymous"`: The video element will send cross-origin requests with no credentials. This is the browser default and usually all you need for most purposes.
+- `"anonymous"`: The video element will send cross-origin requests with no credentials.
 - `"use-credentials"`: The video element will send cross-origin requests with credentials.
 
 ```jsx
-<HoverVideoPlayer videoSrc="video.mp4" crossOrigin="use-credentials" />
+<HoverVideoPlayer videoSrc="video.mp4" crossOrigin="anonymous" />
 ```
 
 ## Overlays

diff --git a/src/HoverVideoPlayer.types.ts b/src/HoverVideoPlayer.types.ts
@@ -191,7 +191,7 @@ export interface HoverVideoPlayerProps
    *    This is the browser default and usually all you need for most purposes.
    * - **"use-credentials"**: The video element will send cross-origin requests with credentials.
    *
-   * @defaultValue "anonymous"
+   * @defaultValue null
    */
   crossOrigin?: 'anonymous' | 'use-credentials';
   /**

diff --git a/src/component/HoverVideoPlayer.tsx b/src/component/HoverVideoPlayer.tsx
@@ -47,7 +47,7 @@ export default function HoverVideoPlayer({
   volume = 1,
   loop = true,
   preload = null,
-  crossOrigin = 'anonymous',
+  crossOrigin = null,
   controls = false,
   controlsList = null,
   disableRemotePlayback = true,

diff --git a/tests/cypress/component/videoAttributes.spec.tsx b/tests/cypress/component/videoAttributes.spec.tsx
@@ -58,17 +58,13 @@ describe('Sets attributes on the video element correctly', () => {
   });
 
   describe('crossOrigin', () => {
-    it('sets crossOrigin to anonymous by default', () => {
+    it('does not set crossOrigin by default', () => {
       mount(<HoverVideoPlayer videoSrc={makeMockVideoSrc()} />);
 
-      cy.get(videoElementSelector).should(
-        'have.attr',
-        'crossorigin',
-        'anonymous'
-      );
+      cy.get(videoElementSelector).should('not.have.attr', 'crossorigin');
       cy.get(videoElementSelector)
         .invoke('prop', 'crossOrigin')
-        .should('eq', 'anonymous');
+        .should('be.null');
     });
 
     it('sets crossorigin on the video when the crossOrigin prop is set', () => {