Skip to content

Instantly share code, notes, and snippets.

@dazoe
Last active April 30, 2019 04:14
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dazoe/0efcd4c49e0dbf26e44639a91f5207ed to your computer and use it in GitHub Desktop.
Save dazoe/0efcd4c49e0dbf26e44639a91f5207ed to your computer and use it in GitHub Desktop.
Zoom netflix videos by using "=" and "-"
// ==UserScript==
// @name Netflix Zoom
// @namespace netflix.tld
// @version 0.3
// @description try to take over the world! ??? Profit.
// @author Dave Akers
// @match https://www.netflix.com/*
// @grant none
// ==/UserScript==
/*
-# DON'T BE A DICK PUBLIC LICENSE
-> Version 1.1, December 2016
-> Copyright (C) 2016 Dave Akers
-
- Everyone is permitted to copy and distribute verbatim or modified
- copies of this license document.
-
-> DON'T BE A DICK PUBLIC LICENSE
-> TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
- 1. Do whatever you like with the original work, just don't be a dick.
- Being a dick includes - but is not limited to - the following instances:
- 1a. Outright copyright infringement - Don't just copy this and change the name.
- 1b. Selling the unmodified original with no work done what-so-ever, that's REALLY being a dick.
- 1c. Modifying the original work to contain hidden harmful content. That would make you a PROPER dick.
-
- 2. If you become rich through modifications, related works/services, or supporting the original work,
- share the love. Only a dick would make loads off this work and not buy the original work's
- creator(s) a pint.
-
- 3. Code is provided with no warranty. Using somebody else's code and bitching when it goes wrong makes
- you a DONKEY dick. Fix the problem yourself. A non-dick would submit the fix back.
-*/
(function() {
'use strict';
var newVersion = true;
var findVideoElement = function() {
var wrapper = document.getElementsByClassName('video-container')[0];
if (!wrapper) {
newVersion = false;
wrapper = document.getElementsByClassName('player-video-wrapper')[0];
}
return wrapper.getElementsByTagName('video')[0];
};
var zoomVideo = function(offset) {
var ele = findVideoElement();
console.log(ele);
var newPercent = parseInt(ele.style.height) + offset;
if (isNaN(newPercent)) newPercent = 100;
console.log(newPercent);
if (newPercent < 100) newPercent=100;
ele.style.position = 'absolute';
ele.style.height = newPercent + '%';
ele.style.width = '100%';
if (!newVersion) {
ele.style.top = (-((newPercent - 100) / 2)) + '%';
}
console.log(ele.style.height);
};
document.onkeydown = function(evt) {
if (evt.keyCode == 187) { // "=" zoomin
zoomVideo(1);
}
if (evt.keyCode == 189) { // "-" zoomout
zoomVideo(-1);
}
};
console.log('Netflix Zoom loaded.');
})();
@dazoe
Copy link
Author

dazoe commented Nov 23, 2016

Added support for the old and new versions of netflix. IE: https://www.netflix.com/DoNotTest
Then there was typo's and I used a previous version that didn't have the license on it...
Then I made it so the captions don't get moved.

TLDR; Made it better, let me know if it's broke.

@nbali
Copy link

nbali commented Dec 13, 2016

@dazoe please make a repo/project out of it, it would be easier to accept contributions through pull requests

@JonathanFW
Copy link

How do I implement this in Google Chrome browser? :-)

@shthed
Copy link

shthed commented Jul 27, 2017

This doesn't seem to work for me when the video is fullscreened.
The following works for me by centering it with margin:auto, replacing lines 57-60 (only tested with !newVersion)

    ele.style.width = '';
    ele.style.margin = 'auto';
    ele.style.top = '-100px';
    ele.style.bottom = '-100px';
    ele.style.left = '-100%';
    ele.style.right = '-100%';

@ciryASD
Copy link

ciryASD commented Nov 7, 2017

Video container name has changed for some reason.
Changing line 40 to
var wrapper = document.getElementsByClassName('VideoContainer')[0];
fixed the script

@garygreen
Copy link

Here's a simpler version. Use the keypads + -

var scale = 1;

function zoom(zoomScale)
{
   var video = document.querySelector('video');
   scale += zoomScale;
   
   if (scale < 1) {
     scale = 1;
   } else if (scale > 1.5) {
      scale = 1.5;
   }
   video.style.transform = 'scale(' + scale + ')';
}

window.addEventListener('keydown', function(e) {
	// +
	if (e.keyCode == 107) {
	   zoom(0.02);
	}
	
	// -
	if (e.keyCode == 109) {
	   zoom(-0.02);
	}
});

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