Embedded YouTube video with custom speed (e.g. 3)

Question

I have an embedded YouTube video in one page and have a slider with which I can set the player speed.

I am using player.setPlaybackRate(value);

The problem is that I want ranges from 0.5 to 3, but the player API restricts the values only to predefined [0.25, 0.5, 1, 1.25, 1.5, 2].

In YouTube I can easily adjust the speed with document.getElementsByTagName("video")[0].playbackRate = 3 but on the iframe I do not have such access.

Answer 1

Where do you see that the player API restricts the values? In the javascript API, you can use setPlaybackRate to set the suggested playback rate, but it says there is no guarentee that what you send will be set. You should use getAvailablePlaybackRates to get the list of playback rates and then choose an appropriate one. You can figure out what rate it was actually set to by listening to the onPlaybackRateChangeevent. If you try to set it to 3 and that is not one of the available rates, it will round towards 1 to the closest rate.

Answer 2

EDIT: This doesn't work anymore.

This is due to the same-origin policy. When an iframe gets accessed by the root origin (your website) it seems to also change the origin of the iframe. So the video can't load from a different origin (youtube.com). See my test on JSFiddle.

I think the fact, that it worked before was a XSS security issue which has been fixed recently. So I can't imagine modifying something in the youtube iframe is even possible anymore. At least not in this way.

Thanks @maxple for pointing out!

---

Original post:

This should be possible with newer Browsers and the HTML5 Iframe Sandbox Attribute:

With the option you can access the iframe DOM node.

<iframe id="myframe" sandbox="allow-scripts" src="about:blank">    </iframe>  <script>     var frame = document.getElementById("myframe");     var fdoc = frame.contentDocument;      fdoc.getElementsByTagName("video")[0].playbackRate = 3; // or whatever </script> 

See this post for more info.