Custom YouTube embedded video (e.g. 3)

Question

I have a built-in YouTube video on one page and there is a slider with which I can set the speed of the player.

I am using player.setPlaybackRate(value);

The problem is that I want to vary from 0.5 to 3, but the player’s API limits the values ​​to only the predefined ones [0.25, 0.5, 1, 1.25, 1.5, 2] .

On YouTube, I can easily adjust the speed using document.getElementsByTagName("video")[0].playbackRate = 3 , but on the iframe I do not have this access.

Answer 1

How do you see the player API limiting the values? In the javascript API, you can use setPlaybackRate to set the recommended playback speed, but it says that there is no guarantee that what you submit will be set. You should use getAvailablePlaybackRates to get a list of playback speeds, and then choose the appropriate one. You can find out at what speed it was tuned by listening to onPlaybackRateChangeevent . If you try to set it to 3, and this is not one of the available bets, it will be rounded to 1 to the nearest speed.

Answer 2

EDIT: this no longer works.

This is due to policies of the same origin. When an iframe accesses the root origin (your site), it also changes the origin of the iframe. Thus, the video cannot be downloaded from another source (youtube.com). See My JSFiddle Test .

I think the fact that it worked before was an XSS security issue that has been fixed recently. Therefore, I can’t imagine that a change in the iftube iframe is possible even more. At least not in that way.

Thanks @maxple for pointing out!

---

Original post:

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

With this 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 more details.

Answer 3

You cannot do the same in iFrame.

What you do on Youtube is to edit the actual video tag, but the only way to do it from another website is through the API provided by Google (due to XSS issues), and if they decide to resolve the proposed values, your best shot is beyond that that may violate their Terms of Service, is to contact Google and ask them to allow third level speed through the API.

Answer 4

Unfortunately, you are trying to edit the contents of an iframe from another domain. None of the major browsers allow you to do this through javascript.

I tried and created a php file that will get the contents of youtube embed iframe

 <?php $url = $_GET['url']; $contents = file_get_contents($url); echo $contents; ?> 

but somehow youtube is blocking a different origin, and it only gave me a black screen. as I already guessed, because youtube uses a flash player to embed videos (instead of html5, like on a website).

therefore, I am sorry, but that is not possible.