'How to jump to a timestamp in a YouTube iFrame in React?

I'm trying to make a button that jumps to a specific time in an iFrame of a YouTube post, but I'm getting the error "TypeError document.getElementsById is not a function".

I've looked into the YouTube Player API but I couldn't figure out how to make it work in React.

<iframe src="https://codesandbox.io/embed/react-playground-forked-pcuxkr?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="React PlayGround (forked)"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>
reactjsiframeyoutube-apiyoutube-iframe-api


Solution 1:[1]

You need to use the iframe api to connect to your iframe if you want to control it.

Seek To: https://developers.google.com/youtube/iframe_api_reference#seekTo

Or you could specify a start time in the url if you'd like a similar approach.

Use start=12 to start at 12 seconds into the video.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 lflfred

Related Questions