Ability to control the player by JS

[Lzadhito]

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.

[ajmaurya99]

onIframeAdded is not that helpful, we need the instance of the video object in return. That will help us manage the play and pause state of the video. Thanks :)

[pReya]

Could be solved if we could just use a ref prop that would be forwarded to the iframe, so it could be programatically controlled.

[ibrahimcesar]

Solved by #87

[iSuslov]

Hey @ibrahimcesar somehow ref is always null for me.

"use client"
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
import {useRef} from "react";

export function VideoPlayer() {
    const myRef = useRef<HTMLIFrameElement>(null)
    
    return <div style={{width: '800px'}}>
        <LiteYouTubeEmbed
            id="zjkBMFhNj_g" // Default none, id of the video or playlist
            adNetwork={true} // Default true, to preconnect or not to doubleclick addresses called by YouTube iframe (the adnetwork from Google)
            params="" // any params you want to pass to the URL, assume we already had '&' and pass your parameters string
            playlist={false} // Use true when your ID be from a playlist
            playlistCoverId="L2vS_050c-M" // The ids for playlists did not bring the cover in a pattern to render so you'll need pick up a video from the playlist (or in fact, whatever id) and use to render the cover. There's a programmatic way to get the cover from YouTube API v3 but the aim of this component is do not make any another call and reduce requests and bandwidth usage as much as possibe
            poster="hqdefault" // Defines the image size to call on first render as poster image. Possible values are "default","mqdefault",  "hqdefault", "sddefault" and "maxresdefault". Default value for this prop is "hqdefault". Please be aware that "sddefault" and "maxresdefault", high resolution images are not always avaialble for every video. See: https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
            title="YouTube Embed" // a11y, always provide a title for iFrames: https://dequeuniversity.com/tips/provide-iframe-titles Help the web be accessible ;)
            noCookie={true} // Default false, connect to YouTube via the Privacy-Enhanced Mode using https://www.youtube-nocookie.com
            ref={myRef} // Use this ref prop to programmatically access the underlying iframe element

        />
        <button style={{marginTop: '100px'}} onClick={() => {
            console.log(myRef) // outputs {current: null}
            // @ts-ignore
            myRef.current.play()
        }}>Play
        </button>
    </div>
}

I'm using v2.4

[ibrahimcesar]

Researching...

[jasongerbes]

It looks like this is possible in the original lite-youtube-embed custom element by passing the js-api param and using the getYTPlayer() method.

https://github.com/paulirish/lite-youtube-embed?tab=readme-ov-file#access-the-youtube-iframe-player-api

Hopefully that helps

[pReya]

Hey @ibrahimcesar somehow ref is always null for me.

Ref will only be populated after you click the poster, because only after this click will the iframe be loaded.