1

I want to be able to have a video as the visual, and I want the video to be muted and have a YouTube video be the audio for it. This is what I have:

<video width="320" height="240" controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

This just makes a mute video play. Now I want to add a YouTube video like this:

<iframe width="1" height="1"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

And I want this YouTube video to play when the user plays the HTML5 video, and when the user pauses the video the YouTube video audio stops. Basically I want the YouTube video to be the audio of the HTML5 video, and the other HTML5 video should just be muted and just be visual.

1 Answers1

1

This should point you in the right direction: YouTube iframe API: how do I control an iframe player that's already in the HTML? -- specifically the chosen answer's JSFiddle.

By gaining control of the iframe youtube player, you can simply make the iframe invisible and link the pause button to both your video and the youtube video.

EDIT: Per request, I have clarified... again :)

https://jsfiddle.net/ericpool/yrkpem4a/11/

Here is the editted JSFiddle that should show you how this is possible. Namely, I have added event listeners to the play pause function of the player to connect with the callPlayer function:

var vid = document.getElementById('myVideo')
vid.play() //play video on start
vid.onpause = (event) => {
    callPlayer('whateverID', 'pauseVideo')
    console.log('paused')
}
vid.onplay = (event) => {
    callPlayer('whateverID', 'playVideo')
  console.log('played')
}

I am not sure why you would need to do this, but please note that because the audio and the video are separate, you may run into sync issues.

Eric
  • 311
  • 1
  • 6
  • Hello I have been having some trouble with this. I have checked this out, but I still need help. Can you give me some code where when the user plays the HTML5 video the YouTube video plays and when the user pauses the HTML5 video, the YouTube video pauses. Thanks. –  Jun 03 '21 at 20:37
  • I have edited to better explain. See changes above. – Eric Jun 03 '21 at 21:04
  • thank you so much, but can you edit the jsfiddle to use on play and on pause of the video rather than using the START links at the top? Thanks a lot, you saved me. –  Jun 03 '21 at 21:18
  • Sure can. See changes above. – Eric Jun 03 '21 at 21:38