Help this school teacher

Question

Hello you all guys. with sololearn I learned some HTML and I even created a simple site for my students. I am working on a code to play a specific portion of a video. I learned how play and pause the video using my onw play and pause buttons. I also learned how to play a specific part part of the video using the currentTime command.

I can do this when the video is in the root folder, but not with embeded video from youTube. And we have youTube as our main video source.

I can not at all make this video play with my own play button.

That's the HTML:

<iframe id="second" src="https://www.youtube-nocookie.com/embed/roP93FA-NgU?controls=0">

</iframe>

<button onclick="play('second')"> This does not </button>

That's the Javascript :

var youTube = document.getElementById('second');

function play() {

second.play();

}

Answer 1

Use a absolutely positioned div to cover the video. Place the play button on the div. So when user clicks play. Append "?autoplay=1" to the src. And remove the cover. It is a hack but it works

or you can do this too
https://css-tricks.com/play-button-youtube-and-vimeo-api/

Answer 2

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.
https://developers.google.com/youtube/iframe_api_reference