![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
No option for picture in picture on twitch
I've just switched to firefox from brave, and theres no button on twitch to enable picture in picture. Using the keyboard shortcut (cmd+option+shift+]) works, but I'd much rather click something on the screen. On brave there used to be a picture in picture button alongside settings, theatre mode, and fullscreen buttons, but on firefox this has been replaced by a clip button. There's no option for it if I right click (this works on youtube), and no option in the address bar for either twitch or youtube. I've tried disabling all my extensions and lowering protections but nothing seems to work.
Vald lösning
Jacob said
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.
Läs svaret i sitt sammanhang 👍 4Alla svar (14)
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
jonzn4SUSE said
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.
Jacob said
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?
Ändrad
Vald lösning
Jacob said
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.
zeroknight said
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?
Ändrad
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}
zeroknight said
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).
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
Ändrad
cor-el said
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.
cor-el said
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!