搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

No option for picture in picture on twitch

  • 14 回覆
  • 0 有這個問題
  • 67 次檢視
  • 最近回覆由 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.

被選擇的解決方法

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.

從原來的回覆中察看解決方案 👍 3

所有回覆 (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?

由 jonzn4SUSE 於 修改

有幫助嗎?

more options

選擇的解決方法

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?

由 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.

由 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!

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先登入帳號 來回覆文章。還沒有帳號的話,只能發問新問題