Describe the bug
TypeScript detected an error 'announce is declared here.
An additional implementation of the "announce" property was added in version 2.0.6, but README.md indicates that it is an optional property.

Screenshots

Is your feature request related to a problem? Please describe.
I have a project which has multiple embedded videos, and I would like to control each one of them with the YouTube API, which seems impossible.

Describe the solution you'd like
I would love some additional parameters to the "LiteYoutubeEmbed" tag that would enable the API commands.

Problem
If maxresdefault or sddefault poster quality doesn`t exist the video gets no thumbnail.

Suggestion
Add fallback poster quality if the originally selected one is not available.
If the api call return a 404 the component could try again using the fallback quality.

Describe the bug
Currently, as per my testing, the div generated by the plugin is not focusable using the tab key. That means they are not accessible by screen-readers or keyboard users.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://react-lite-youtube-embed.ibrahimcesar.cloud/
2. click on the Tab key on the keyboard.

Expected behavior
The div should get focus and on Enter, it should fetch the iFrame and play the video

Possible Fix
Changing the youtube play button to a button from div seems to fix it.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome, Mozilla

Describe the bug

• ref never seems to get populated.
• onIFrameAdded doesn't seem to get called.

I'm relatively inexperienced with React and this is my first attempt at using ref so it's entirely possible this is my fault.

To Reproduce

Here's my code extracted for readability:

const videoRef = useRef<HTMLIFrameElement>(null);

useEffect(() => {
  if (videoRef.current) {
    console.log("videoRef.current is present");
  }
}, []);

<LiteYouTubeEmbed
  id={post.content.youtubeId}
  title={post.content.title}
  onIframeAdded={() => console.log("onIframeAdded")}
  ref={videoRef}
/>

Expected behavior

I would expect the console to contain logs showing "videoRef.current is present" and "onIframeAdded".

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 120

Additional context

I'm trying to add react-lite-youtube-embed to a Next.js app (v14). We have a number of event handlers we need to attach to the YouTube iframe and I was expecting to do that inside an effect.

The original lib from https://github.com/paulirish/lite-youtube-embed accepts a params prop which allows you to use other youtube params

https://github.com/paulirish/lite-youtube-embed#custom-player-parameters

Without this we have no way to control ther youtube params

Describe the bug
Google's SEO bot won't find videos if using Paul Irish's player; there is no link to follow.

To Reproduce
in thread

Expected behavior
Add metadata for the bots

Additional context
Bug reporter has an alt-fix to use a iframe.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Title pretty much says it all.
I was curious so i wrote this custom hook who's return value i pass to the poster prop:

const useKindaLazyYouTubeThumbnail = () => {
  const [imgRes, setImgRes] = useState<"mqdefault" | "maxresdefault">("mqdefault");

  useEffect(() => {
    setTimeout(() => {
      setImgRes("maxresdefault");
    }, 5000);
  }, []);

  return imgRes;
};

What do you guys think? I noticed that changing the poster will show a blank thumbnail for a brief moment because the new thumbnail needs to get downloaded. I've already tried putting a prefetch element into the , but couldn't get it to work yet (it doesn't create a request):

<link rel="prefetch" href={`https://i.ytimg.com/vi_webp/${id}/maxresdefault.webp`}/>

By the way i think it would be cool if the type for the poster prop was importable. You can technically get to it through Parameters<typeof LiteYouTubeEmbed>["0"]["poster"] but yeah i'll let it speak for itself lmao

I'll make a PR for that little export.

Is your feature request related to a problem? Please describe.
Hello! very glad to know there is an import of lite-youtube-embed 😄 .
I wanted to create a custom player which can do double tap to seek. These, would require JS on the player.

Describe the solution you'd like
creating a Player object which can be added as props to LiteYouTubeEmbed and enable the ability to control the player.

Just realized that Youtube provides WebP images, just wonder if it could be supported in this. Here is the URL format of the WebP image.

https://i.ytimg.com/vi_webp/{video_id}/{quality}default.webp

Thank you very much.

Is it possible to export the styles separately?

Describe the bug

The dist files of this module use the .jsx extension, which causes issues when importing it with Node's native ESM support (like in an implementation of epic-stack).

To Reproduce

1. Import react-lite-youtube-embed with just Node's ESM support.

Expected behavior

This should load the file - it's just JavaScript, no JSX syntax in there, it should just load.

But you'll get something like

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".jsx" for /src/node_modules/react-lite-youtube-embed/dist/index.jsx
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11

In Node v20.

Screenshots

(This is a build-time issue)

Desktop (please complete the following information):

(This is a build-time issue)

Smartphone (please complete the following information):

(This is a build-time issue)

The fix for this would be to generate dist packages with .js extensions.

Describe the bug

The title pretty much says it all.
When you run document.querySelector("iframe") in the callback function / event handler, it's null.
I haven't looked at the source code but i can imagine that the callback is called together with the state update that will end up rendering the iframe, but the DOM update takes place after all state updates, and i think even after their callback functions.

I'd like to request a option to switch between preload or prefetch/any other rel options for the link url that's made for the thumbnail.

Thank you very much for developing this wonderful library.

In my app, it worked from displaying the video thumbnail and YouTube icon to the icon hover effect.
When I press the thumbnail, nothing happens and I can't play it.
I'm using Next.js to parse the article information retrieved from the CMS into html on the server side, is this the cause?

When I checked the html elements, it seemed that the following two types of link tags were missing when compared to demo.

• <link rel="preconnect" href="https://www.youtube-nocookie.com">
• <link rel="preconnect" href="https://www.google.com">

demo

myApp

When I checked the behavior with CodeSandBox, the thumbnail display did not work, but the playback did, so I figured that the lack of playback might be due to server-side processing.

The title of the video doesn't show up even after passing it as a prop.

Rendered:

Is your feature request related to a problem? Please describe.
Cache-Control policy does not support external URLs. Google Lighthouse flags all static resources that aren't cached.

Describe the solution you'd like
Add prop to import local image.

@ibrahimcesar can we hide the suggested videos after watching the video?

As titled

Reference: ampproject/amphtml#2298 and tylerpearson/lazyYT#45

Description
It is a bit limited to use this awesome library with Typescript, because the LiteYouTube interface is not exported, there is no possibility to import it, and all the props should be defined in the end consuming app. That can lead to the situation when the defined in the end application interface is not up to date with the LiteYouTube one. It would be great to have an opportunity to import it.

To Reproduce
Steps to reproduce the behavior:

1. Go to the consuming app, that is based on the Typescript
2. Try to import the LiteYouTube interface

Expected behavior
You can import the interface

Desktop :

• Browser [e.g. chrome, safari]

I'm having trouble when I import the lib css, because postcss-custom-properties gives an annoying warning saying that --aspect-ratio variable is undefined and doesn't have a fallback.

Expected behavior
It would be good if the css had the aspect-ratio fallback so I could import the lib css without the warning, right now I have to copy the css to avoid the warning.

Screenshots

Is your feature request related to a problem? Please describe.
When a video playing is complete, the iframe shows irrelevant video suggestions which are out of place for an embedding website.

Describe the solution you'd like
Embed APIs has events support. Based on the player state, we can give a better behavior when the video ends, say, showing a thumbnail or taking the video back to time=0.

Describe alternatives you've considered
Using playlist mitigates the issue, but it is not optimal for all cases. The problematic views still come up at the end of playlist.

Screenshot upon video completion:

Additional context

Right now, I only have a demo application in this folder that I use for all sorts of experiments and exploratory tests.

But would be easier and less error prone have some tests. I thinking at least of Cypress. But feel free to collaborate!

Describe the bug
I have to press the play button trice to play the video on safari

To Reproduce
Steps to reproduce the behavior:
open: https://www.thisiscoin.com/watch
on safari
and click on the play button. you will see that it props you to play again

Expected behavior
should play only clicking once

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
Safari Version 14.0.3 (16610.4.3.1.4)

Describe the bug
When playing a Safari video, a black margin appears on the left side

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser Safari
• Version 17.1.2

I tried to use in a project with NextJs and typescript but got the following message "Cannot find module 'react-lite-youtube-embed' or its corresponding type declarations.ts(2307)"

Not sure if I am doing something wrong but I would appreciate if I could use your component :D

Is your feature request related to a problem? Please describe.
It would be nice to get a callback, when iframe is added.

Describe the solution you'd like
Add onIframeAdded: () => void to component param

Describe alternatives you've considered
Currently there is no alternative that I can think of...

Is your feature request related to a problem? Please describe.

Running a lighthouse audit on my side, I get the following suggestion:

Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more.

Describe the solution you'd like

I would like to lazy load the thumbnail image to save bandwidth and load time, especially if the video is embedded at the bottom of my page. Maybe the feature is configurable on the enabled.

Describe alternatives you've considered
None

Additional context
Right now a background image is used for the thumbnail. It's not possible to use the native lazy loading for background images. Maybe we have to switch too using an <img> tag instead. We could still stack the image, iframe and button over each other. The only problem I see is centering the image and keeping it's aspect ration, but that should be possible too.

Currently the package loads the hqdefault image.

I am using your package and bootstrap to display the youtube on a website. Therefore it would be great if the choice of image could be based on the width of the frame (e.g. load mqdefault on mobile and maxresdefault on desktop).

EDIT: I just saw it is configurable. Just wonder if it is possible that it is automatic.

If a video created for mobile first is used, setting aspectWidth={9) and aspectHeight={18} doesn't seem to have an effect.
Forcing the height via playerClass="min-h-96 w-full" seems to do the job, but the preview doesn't show the play button afterwards, while the loaded player works great:

Preview:

Loaded:

Am I misunderstanding the usage of the aspect ration props in this case and how the component should be adapted for vertical video?
What would the correct way of implementing vertical video embeds look like?

All the best and thank you for the great package!

Version: "^2.2.2",
Gatsby