Fixing site incompatibilites ('Advanced settings')

TL;DR

1. In 'advanced settings' in the popup, uncheck automatically detect, check Specify player node parent index instead, play with the number in the Player node parent index: input box.

For people who want to contribute and know HTML/CSS:

1. Find id/class of the player <div>
2. Open popup, click 'Advanced settings', scroll down to 'Player detection settings'
3. Untick 'detect automatically'
4. Put appropriate query selector in the query selector box. You can specify multiple query selectors as well, separate them with commas. More info.
5. Sharing is caring. Consider opening an issue and sharing the query selector and site's URL.

User-friendlier version

In order to properly fit the video, the extension needs to know (the dimensions of) two things:

• the element with the video (<video> tag)
• the player element

Finding the element that contains the video is fairly easy. However, finding the player element is harder because we need to make some assumptions to make that. I'll skip the unnecessary details, but needless to say: since every site is coded in a different manner and has different quirks, the extension may fail to pick the correct player element on certain sites. If that happens, cropping will not work.

The quick & dirty way

1. Go to the whatever site you're having trouble with and ensure a video is playing
2. Open the extension popup
3. Go to 'advanced settings'
4. Under 'player detection settings', untick 'automatically detect' and tick 'Specify player node parent index instead' checkbox.
5. Enter '1' in the 'Player node parent index', close the popup and refresh the page.

5. If cropping works, congrats. If it doesn't, increase the value in 'Player node parent index' by 1, close the popup and refresh the page again.
6. Repeat step #5 until cropping works properly. If you've repeated step #5 for more than 10 times without success, you're either A) expecting autodetection to kick in on a site that utilizes DRM protection (probably because you didn't pay any attention to extension description, or at least the part that says autodetection doesn't work on sites that utilize DRM protection schemes) or B) the site is written in a way that doesn't allow extension to work.

In case of A), use extension popup or keyboard shortcuts to set aspect ratio.

In case of B), you might need to do things the proper way AND provide additional CSS

The proper way

Ultrawidify allows you to tell it the name (id or class for those familiar with basic HTML and CSS) of the player element. If you find Ultrawidify not working on your video streaming platform of your choice, you may want to do so.

0. Ensure a video is playing.

1. Open browser console (right click -> inspect element) (alternatively: press F12). A window similar to the one on the screenshot below should open:

2. If you click in the bottom half of the window, you'll can type or paste things into it. Type/copy-paste this: document.getElementsByTagName('video') and press 'enter'

3. After pressing 'enter', you should get something like this: Click the square marked in the screenshot. This will highlight a line of text.

4. Start moving your mouse over lines above the selected one (and with lesser indentation). When you do so, browser will highlight part of your screen. When you see that the highlighted area covers the entire player (including the controls) and nothing else. That's the player element.

5. Look for id="<something>" and `class="" (underlined with yellow and red):

6. Open the extension popup, click 'Advanced settings' tab. Uncheck both 'detect automatically' and 'Specify player node parent index instead' checkboxes.

If you can see id in the element you want, just copy the id in the query selectors textbox and put a # in front of it — for example, if the player element looks like <div id="movie_player" class="foo bar baz">, you put #movie_player (with the # in front of it, without quotes) in the text box.

If the element doesn't have an id, try finding a parent that does have it:

We're in luck, because the first parent has an id (<div id="container" class="style-scope ytd-player">). Then, you look at the classes on the player element. Using classes is less than ideal, as they're not as reliable as an id. Some classes might sometimes vanish, some also appear elsewhere.

For example, on the example screenshot above, paused-mode and 'ytp-hide-info-bar' sound like something that'll vanish the moment we press 'play', so we will not be using that (similar thing applies to 'ytp-large-width-mode'). There's also some other classes that don't sound terribly relevant ('ad-created', 'ytp-transparent'). 'html5-video-player', on the other hand, sounds like something we can reliably expect to be there always and never change.

(If you lack the hunch to tell which class to take, you can experiment a little)

Now that we found the class ('html5-video-player') of the player element and an id ('container') of its parent, we can join them like this:

#container.html5-video-player

The #container part tells us to look for element with id="container". .html5-video-player tells us to look for element that has html5-video-player in it's class="" thing.

TODO: finish this later