You don't see this? see screenshots

On the Twitch player, I use the gear icon and click on Popout Player so the video is in its own window. You can also popout chat in same way.

Note that Firefox doesn't show the PiP icon for short videos, there is a minimum length of 45 seconds.

• about:config => media.videocontrols.picture-in-picture.video-toggle.min-video-secs

You don't see this? see screenshots

The button in the red square in your first screenshot doesn't appear for me. When using the keyboard shortcut, it does look like your second screenshot.

I've tried disabling all my extensions and lowering protections but nothing seems to work.

Was this Troubleshoot mode or did you manually disable the add-ons?

no option in the address bar for either twitch or youtube

There should be a PiP button in the address bar on Twitch live streams. Try resetting all the media.videocontrols.picture-in-picture settings to default in about:config.

Does it still happen in a new profile? An easy way to test a new profile is to install Developer Edition and see if it happens there or refresh your existing profile. Make sure you stay signed out of your sync account when testing.

There should be a PiP button in the address bar on Twitch live streams. Try resetting all the media.videocontrols.picture-in-picture settings to default in about:config.

This works, thank you! However, is there a way to hide the floating button and just have the option in the address bar?

You can hide the PiP toggle on videos by adding the following to the userContent.css file:

.pip-wrapper {
  display: none !important;
}

The file needs to be located in a folder named "chrome" in your profile folder. It also requires changing toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config then restarting the browser.

Note that you can move the PiP button to a more convenient position at the top/bottom and.left/right.

.pip-wrapper{top:0% !important; right:35px !important}

• https://searchfox.org/mozilla-release/source/toolkit/themes/shared/media/pipToggle.css

You can hide the PiP toggle on videos by adding the following to the userContent.css file: .pip-wrapper { display: none !important; } The file needs to be located in a folder named "chrome" in your profile folder. It also requires changing toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config then restarting the browser.

I changed the setting in about:config and restarted firefox, located my profile folder but couldn't find the userContent.css file. The only chrome folder I could find was in storage > permanent, but inside there was only a folder labelled idb that contained a bunch of empty folders and .sqlite files.

Thank you for your help so far!

It is not that difficult to create userContent.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt or .css file extension and you end up with a file like userContent.css.txt or userContent.css.css. To avoid this, you need to make sure to select "All files" in the "Save File" dialog in the text editor.

You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.

More info about userChrome.css/userContent.css in case you are not familiar:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/firefox-changes-userchrome-css.html

In Firefox 69 and later you need to set this pref to true in about:config to enable userChrome.css and userContent.css.

• about:config => toolkit.legacyUserProfileCustomizations.stylesheets => true
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

This didn't work, I tried a few times and tried with the file name being userChrome.css and userContent.css but neither removed the floating pip button.

Sorry, the code need to be in userContent.css in this case, I will edit my above reply. You can rename userChrome.css to userContent.css and make sure that you do not get a double .css file extension, i.e. not userContent.css.css and you may only need userContent if the file extension is hidden.

Sorry, the code need to be in userContent.css in this case, I will edit my above reply. You can rename userChrome.css to userContent.css and make sure that you do not get a double .css file extension, i.e. not userContent.css.css and you may only need userContent if the file extension is hidden.

Was just editing my response to mention I got it working. I generated the file on the userchrome website (www.userchrome.org/download-userchrome-css.html) and put that in the chrome folder, which worked. For some reason making the file with TextEdit didn't work, not sure why but maybe to with it not actually being saved as a .css. Anyway it works now, thank you!