Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

No option for picture in picture on twitch

  • 14 réponses
  • 1 a ce problème
  • 1 vue
  • Dernière réponse par Jacob

more options

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.

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.

Solution choisie

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.

Lire cette réponse dans son contexte 👍 4

Toutes les réponses (14)

more options

You don't see this? see screenshots

more options

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.

more options

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
more options

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.

more options

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?

Modifié le par jonzn4SUSE

more options

Solution choisie

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.

more options

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?

Modifié le par Jacob

more options

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.

more options

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}
more options

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!

more options

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:

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

Modifié le par cor-el

more options

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.

more options

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.

more options

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!