• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / Speed Up Video in Iframe

Speed Up Video in Iframe

Last updated on September 6, 2019 by Sal Ferrarello

My wife has to watch some videos as part of an online course. These videos do not have speed controls, however she would like to watch the video at an increased rate (e.g. 1.5x the normal speed).

Manually adding code like the following in the browser console

document.querySelector('video').playbackRate = 1.5;

should do the trick.

iframe Problem

Unfortunately, the video appears in an iframe inside another iframe therefore this code does NOT work.

Screenshot of Google Chrome console Video Playback Rate change failing.

Instead we need to make this call in the correct frame.

Solution for My Wife

On the specific site my wife was dealing with the following changes the video speed to 1.5x.

window.frames[0].frames[1].document.querySelector('video').playbackRate = 1.5;

General Solution

Since it is non-trivial to determine which frame contains the video, a general solution makes the call on each frame recusively.

General Solution

function feAdjustVideoPlaybackInFrame(frame, playbackRate) {
  var i;
  for (i=0; i<frame.frames.length; i++) {
    try {
      feAdjustVideoPlaybackInFrame(frame.frames[i], playbackRate);
      frame.frames[i].document.querySelector('video').playbackRate = playbackRate;
    }
    catch(e) {};
  }
}
feAdjustVideoPlaybackInFrame(window, 1.5);

General Solution Explanation

Initially, we call our function with the frame set to window (the top level frame). Inside the function we determine the number of frames inside this frame (frame.frames.length) and then iterate the variable i through the index for each frame (e.g. if there are two frames, we loop through using i=0 and i=1).
For each inner frame we call our function again (this time with the inner frame instead of window). This allows us to drill down through all frames.

In each frame (frame.frames[i]) we search for the <video> element (document.querySelector('video')) and when we find it we set the playbackRate to 1.5. We wrap this call in a try/catch block, so if any part of it fails (e.g. there is no video element in this frame) our code skips over the error and moves forward with the next item.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming, Solution Tagged With: iframe, JavaScript

Reader Interactions

Comments

  1. Jose Jimenez says

    August 19, 2022 at 5:29 pm

    This didn’t seem to work for me. Not sure why exactly. I’m watching a video on adobe.com’s tut section and it returns undefined when I try to run the code above in the console.

    Reply
    • Sal Ferrarello says

      August 20, 2022 at 10:09 am

      I believe the videos on https://www.adobe.com/express/learn/tutorials are using YouTube for their videos. With a YouTube video there is a Settings icon (that looks like a gear) and inside those settings you can adjust the Playback speed. Hopefully if this works for you, you won’t need this script.

      Reply
  2. Dan King says

    August 26, 2022 at 10:31 am

    Hi. Sal,

    I tried your code in the console but it did not work. The video I am attempting to speed up appears to be a combination of audio and slides built into iframes. Is this something you have seen before?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in