Ability to control the player by JS
Lzadhito opened this issue · 6 comments
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.
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 :)
Could be solved if we could just use a ref prop that would be forwarded to the iframe, so it could be programatically controlled.
Solved by #87
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
Researching...
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.
Hopefully that helps