Search code examples
javascripthtmliframeyoutube

rewind youtube embedded video [html, css, js]

I'm new to the whole html css js pack and I'm trying to create a website that will display a youtube video with the controls locked (I've done this by blocking the user from interacting with the video) and I want to add some rewind and slow down buttons The video is inside an iframe

<div class="video-background">
  <div class="video-foreground">
    <iframe id="myvid" class="ytplayer-nbvz" src="" frameborder="0" allowfullscreen loading="lazy" controls="0" ></iframe>
  </div>
</div>

I've tried using Youtube's API and queryselector, I tried queryselector on the iframe element and worked (the console log printed the iframe) but when I attempted .playbackRate it didn't change anything

Solution

  • It's not possible to directly control the playback rate of a YouTube video embedded within an iframe using JavaScript due to security restrictions. YouTube's embedded player does not expose playback rate control through the JavaScript API when embedded via an iframe.

    But we can achieve the desired functionality by creating a video player in HTML and required scripts, here we have to use the video source