feat: add hideButtonOnActivate prop to hide play button after activation (#247)

* feat: add hideButtonOnActivate prop to remove play button after click

* feat: add hideButtonOnActivate prop to hide play button after activation

* feat: add hideButtonOnActivate prop to hide play button after activation

Author: tiagogp

docs/docs/api-reference.md

@@ -330,6 +330,20 @@ The `noCookie` prop is deprecated. Use `cookie` prop instead.
 />
 ```
 
+#### `hideButtonOnActivate`
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Hide play button after video is activated (iframe loaded)
+
+```tsx
+<LiteYouTubeEmbed
+  id="VIDEO_ID"
+  title="Video"
+  hideButtonOnActivate={true}
+/>
+```
+
 ---
 
 ## SEOData Type

src/lib/index.test.tsx

@@ -357,6 +357,25 @@ describe("LiteYouTubeEmbed", () => {
     expect(ref.current!.tagName).toBe("IFRAME");
   });
 
+  test("hides play button after activation when hideButtonOnActivate is true", () => {
+    render(<LiteYouTubeEmbed {...defaultProps} hideButtonOnActivate />);
+
+    // Button exists initially
+    const playButton = screen.getByRole("button");
+    expect(playButton).toBeInTheDocument();
+
+    // Click to activate
+    fireEvent.click(playButton);
+
+    // Button should be removed
+    const removedButton = screen.queryByRole("button");
+    expect(removedButton).not.toBeInTheDocument();
+
+    // Iframe should be present
+    const iframe = screen.getByTitle(defaultProps.title);
+    expect(iframe).toBeInTheDocument();
+  });
+
   describe("Lazy loading", () => {
     test("renders with background-image by default (no lazy loading)", () => {
       const { container } = render(<LiteYouTubeEmbed {...defaultProps} />);

src/lib/index.tsx

@@ -273,6 +273,11 @@ export interface LiteYouTubeProps {
    * }}
    */
   onPlaybackQualityChange?: (quality: string) => void;
+  /**
+   * Remove the play button element after the video is activated (iframe is added).
+   * @default false
+   */
+  hideButtonOnActivate?: boolean;
 }
 
 /**
@@ -763,16 +768,18 @@ function LiteYouTubeEmbedComponent(
         {props.playlist && !iframe && (
           <div className="lty-playlist-icon" aria-hidden="true"></div>
         )}
-        <button
-          type="button"
-          className={playerClassImp}
-          aria-label={`${announceWatch} ${videoTitle}`}
-          aria-hidden={iframe || undefined}
-          tabIndex={iframe ? -1 : 0}
-          onClick={addIframe}
-        >
-          <span className="lty-visually-hidden">{announceWatch}</span>
-        </button>
+        {!(props.hideButtonOnActivate && iframe) && (
+          <button
+            type="button"
+            className={playerClassImp}
+            aria-label={`${announceWatch} ${videoTitle}`}
+            aria-hidden={iframe || undefined}
+            tabIndex={iframe ? -1 : 0}
+            onClick={addIframe}
+          >
+            <span className="lty-visually-hidden">{announceWatch}</span>
+          </button>
+        )}
         {iframe && (
           <iframe
             ref={ref}