Watch YouTube Spoiler Free

UPDATE: Now supports Twitch in addition to YouTube!
Source code available on GitHub

VOD:NoSpoil

Bookmarklet

Drag this link onto your toolbar or bookmarks folder. Click it from any YouTube video page.

YT:NoSpoil

Your video will play:

• Full windowed
• No comments
• No progress bar

Why?

• Won't see spoilers in comments
• Can't see time left in competitions to guess the outcome
• Maximize viewing screen
• Avoid loading page elements you don't want to look at

 

What the bookmarklet does:

Redirects the URL of a YouTube video page to its embedded player page and removes the controls.
Uses JavaScript.

Here is the JavaScript code:

var regex_pattern = 
/https:\/\/www\.youtube\.com\/watch\?v=([^&]*)(?:.*(?:(?=(?:&t=(?:(?:(?:[01]?\d|2[0-3])h)?(?:[0-5]?\d)m)?(?:[0-5]?\d)s))))?(&t=(?:(?:([01]?\d|2[0-3])h)?([0-5]?\d)m)?([0-5]?\d)s)?/;

var source_url = window.location.href; // get the current URL
var regex_match = regex_pattern.exec(source_url); // see if URL is a YouTube page

// if yes, prepare the video with embedded player
if (regex_match!==null){

        var newurl = source_url.replace(regex_pattern,
        "https://www.youtube.com/embed/$1?controls=0");

// if regex found a time signature "&t=00h00m00s"
        if (regex_match[2]!=null){
// convert the time signature to seconds and append to URL as start time
            var start_time = 0;
            if (regex_match[5]!=null) {start_time += parseInt(regex_match[5]);}
            if (regex_match[4]!=null) {start_time += parseInt(regex_match[4]) * 60;}
            if (regex_match[3]!=null) {start_time += parseInt(regex_match[3]) * 3600;}
           
            newurl += "&start=";
            newurl += start_time.toString();
// note: do not add the letter "s" at end or video starts before the specified time
        }
        window.location.href = newurl;} // redirect browser to new URL

How to use JavaScript code (Instead of bookmarklet):

Open up the web console in your browser. In Chrome or Firefox you can get there by pressing F12. Do this on any YouTube video page. Then copy and paste the JavaScript code to run it.

What the code does:

Same thing as the bookmarklet. I can explain in more detail.

1. Creates a Regular Expression (RegEx) pattern that checks if the browser is on any page of the form:

"https://www.youtube.com/watch/?v=foo"

 with optionally any time signature like

"&t=00h00m00s".

(The latter is accomplished with an repeatable positive lookahead on the optional time signature of form "00h00m00s". This parses through any other "&" modifiers we don't want. Then we capture on the optional time signature.)

(&t=(?:(?:([01]?\d|2[0-3])h)?([0-5]?\d)m)?([0-5]?\d)s)?

see reference: RegEx matching a time signature

2. Replaces the browser URL with

"https://www.youtube.com/embed/foo?controls=0"

or optionally with time signature (converted from h/m/s to seconds)

"https://www.youtube.com/embed/foo?controls=0&t=00000"

RegEx breakdown

 var regex_pattern = 
/https:\/\/www\.youtube\.com\/watch\?v=([^&]*)(?:.*(?:(?=(?:&t=(?:(?:(?:[01]?\d|2[0-3])h)?(?:[0-5]?\d)m)?(?:[0-5]?\d)s))))?(&t=(?:(?:([01]?\d|2[0-3])h)?([0-5]?\d)m)?([0-5]?\d)s)?/;

Match "https://www.youtube.com/watch/?v=foo". Accept any foo that does not use "&"

https:\/\/www\.youtube\.com\/watch\?v=([^&]*) 

Parse through any characters between "?v=foo&" and "&t=" if time signature is present.

(?:.* // non-capturing group on any character between "foo&" and "&t"
// positive lookahead on the 00h00m00s time signature. Finds but does not include it!
(?: (?=
(?:&t= // start of time signature
(?:(?:(?:
[01]?\d|2[0-3])h)? // optional hours. either 0-19 or 20-23.
(?:[0-5]?\d)m)? // optional minutes. 00-59.
(?:[0-5]?\d)s))) // mandatory seconds. 00-59.
)? // having a time signature ahead is optional

 Capture the time signature if it is present

(&t=(?:(?:([01]?\d|2[0-3])h)?([0-5]?\d)m)?([0-5]?\d)s)?

The regex.match result will look like:

 regex_match: [ "https://www.youtube.com/watch?v=iMh…", "iMhLteKsmro", "&t=1h10m27s", "1", "10", "27" ]

There are five captured groups.

1. Video ID
2. Time signature (if present)
3. Hours (if applicable)
4. Minutes (if applicable)
5. Seconds (if applicable)

 

References:

RegEx builder and tester
https://regexr.com/ 

RegEx matching a time signature
https://stackoverflow.com/questions/8318236/regex-pattern-for-hhmmss-time-string

(FYI) Escape characters in JavaScript string to build RegEx
https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex 

Start embedded YouTube at a certain time
https://www.techuntold.com/embed-start-youtube-video-certain-time/

Convert JavaScript into bookmarklet
https://mrcoles.com/bookmarklet/