Inject javascript into YouTube to make video fullscreen

Question

I'm writing a Chrome extension to alter the functionality of YouTube. I have code injected onto the page, and I'm trying to trigger fullscreen of the video in certain circumstances.

I've done everything I can think of, but to no avail.

Double-clicking the video:

$('video').click();
setTimeout(function() {
  $('video').click();
}, 40);

But this way doesn't work. I'm not sure why, but I think Youtube expects a 'real' click or something?

Simulating the 'f' keypress:

var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 70;

And dozens of variations of the above, none seem to work. Think it might be a Webkit thing.

Linking to a video in the format: https://www.youtube.com/v/<vid-id>. But this won't suit my purposes because I need to be able to call it again after page load.

Anyone any ideas on how to make Youtube full screen after page load via Javascript?

score 3 · Accepted Answer · edited May 23 '17 at 12:08

3

Youtube probably is using the requestFullScreen Javascript API to take the video player to fullscreen.

Per specifications of requestFullScreen API, it must be triggered by direct user interaction.

This means you will not be able to force the player to full screen unless you have a button that a user clicks or something of that nature.

Related SO Question:

Javascript request fullscreen is unreliable

edited May 23 '17 at 12:08

Community

1
1

answered Jun 21 '16 at 19:51

ryancdotnet

2,015
16
33

Yeah, you may have a point. It works in the console, but not in code. What a troll. – Dara Java Jun 21 '16 at 20:07

score 2 · Answer 2 · answered Jun 21 '16 at 19:47

You could try something like this:

var vid = $("video");
if (vid.requestFullscreen) {
  vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
  vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
   vid.webkitRequestFullscreen();
}

score 1 · Answer 3 · answered Jun 21 '16 at 19:51

1

If you want to do a double click, just use dblclick() javascript function.

Also, instead of doing a dblclick on video, you could try doing a click on the fullscreen button of youtube video.

answered Jun 21 '16 at 19:51

Federico Martinez

417
2
10

Inject javascript into YouTube to make video fullscreen

3 Answers3