Skip to content

Instantly share code, notes, and snippets.

@patricknelson
Last active November 12, 2022 22:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patricknelson/fa62ebe38fd1d2d3834e01d27e062689 to your computer and use it in GitHub Desktop.
Save patricknelson/fa62ebe38fd1d2d3834e01d27e062689 to your computer and use it in GitHub Desktop.
Full Screen Bookmark / Bookmarklet

Full Screen Bookmark / Bookmarklet

Can't go to full screen easily? On a website and hate their customized version of a video player and just wish you could use the one built into your device or browser? It turns out there's a solution: In many cases, you can actually bypass this by simply taking the <video> element on the page and forcing it to go to full screen immediately with a single press using a simple bookmark (or, a bookmarklet to be precise).

Instructions

Create a bookmark, call it Full screen and copy/paste the following into the URL field:

javascript:(function()%7Bvar fsvs %3D document.getElementsByTagName('video')%3Bfor(i%3D0%3B i < fsvs.length%3B i%2B%2B) %7Bvar vid %3D fsvs%5Bi%5D%3Bwindow.fsv %3D window.fsv %7C%7C vid%3Bvar playing %3D !!(vid.currentTime > 0 %26%26 !vid.paused %26%26 !vid.ended %26%26 vid.readyState > 2)%3Bif (playing) %7Bwindow.fsv %3D vid%3Bbreak%3B%7D%7Dif (window.fsv) window.fsv.webkitEnterFullscreen()%7D)()

Features

  • Search for the first playing video on the current page and make it full screen
  • If there are no currently playing videos, it will return the last video that the bookmark made full screen back to full screen
  • If there are no currently playing videos and it hasn't been used before, the first video found will be made full screen
  • In some cases, it can make it easier for you to skip advertisements (depending on how advanced the website is at detecting actual played time). All you have to do is just make the video full screen, skip ahead and 🤞

Known limitations:

  • This won't work when the video you see in the page is embedded from elsewhere (i.e. via an <iframe> hosted on a separate domain)

Source Code

(function() {
	var fsvs = document.getElementsByTagName('video');
	for(i = 0; i < fsvs.length; i++) {
		var vid = fsvs[i];
		window.fsv = window.fsv || vid;
		var playing = !!(vid.currentTime > 0 && !vid.paused && !vid.ended && vid.readyState > 2);
		if (playing) {
			window.fsv = vid;
			break;
		}
	}
	if (window.fsv) window.fsv.webkitEnterFullscreen()
})()

Customizing

To alter this, just edit the code above and pass it through a bookmarklet creator tool, like https://chriszarate.github.io/bookmarkleter/.

@patricknelson
Copy link
Author

Note for anyone reading this: I just don’t encode the spaces since it works fine without that and it saves 2 bytes per space.

Why use big %20 when do trick?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment