4

When in full screen mode and pausing YouTube the player usually display some text (Likely related to other content) across the top of the viewer. Example screenshot included. This prevents seeing details related to the content. Anyone know how to block / disable this? Example pasted below:

enter image description here

3
  • In this case yes. Usually tutorials overlay titles, or links to future content, or ads up there whenever you hit pause. Sometimes I'm hitting pause in order to see the details under the element that has been overlayed.
    – Ole
    May 7, 2018 at 19:06
  • Yes - It's possible to delete some of them with the developer tooling, but in this case it only shows up when you go to full screen and you can't have fullscreen and dev tools open at the same time ...
    – Ole
    May 7, 2018 at 21:48
  • Actually you can! I'm attaching a short demonstration GIF in a few minutes May 8, 2018 at 7:09

3 Answers 3

4

You can open the developer tools (even in full screen mode), search for a div with those exact classes: ytp-chrome-top ytp-share-button-visible - and delete it.

It's the top row of the YouTube video, including the title and buttons. If you only wish to delete the title - match the div with the class ytp-title-text.

A more clever way, would be to create a user script that delete this div, or hides it when in full screen (or any other time you want), it should be rather easy.

Demonstration GIF (too big to attach here)

Simple "scripts"

  • Run it from the DevTools console:
    It will work upon loading - no need go to full screen first.

    $('div.ytp-chrome-top.ytp-share-button-visible').remove()
    

    OR

    document.getElementsByClassName('ytp-chrome-top ytp-share-button-visible')[0].remove()
    
  • Use this as a bookmarklet to toggle the visibility of the video title bar:

    $('div.ytp-chrome-top.ytp-share-button-visible').hidden = !$('div.ytp-chrome-top.ytp-share-button-visible').hidden;
    
1

You can also "hide" it:

  1. Enable "select element in the page to inspect it" (Ctrl+Shift+C).
  2. Select the title of the video. The div will be highlighted in the console.
  3. Click on the three dots on the left of the highlighted part.
  4. Select "hide element".
1

As of 2023, in the element tab of devtools How to access devtools

You want to find (Ctrl+F) and delete the following:

  • ytp-chrome-top
  • ytp-chrome-bottom

And if you want to remove the gradient overlay when your mouse cursor in on top of the video, remove these as well:

  • ytp-gradient-top
  • ytp-gradient-bottom

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.