I was trying to write a chrome extension that blocks all videos from showing in the youtube home page. I have used the 'view page source' option in chrome browser to obtain the html of the youtube site,and upon inspecting the source,I've concluded that each video is encaplsulated in a div with class 'rich-grid-media-skeleton' I have tried applying style display:none to each div with a class of 'rich-grid-media-skeleton'

However this does not work,and the videos on the home page are still visible.I've found an extension on github,that's does something similar to what im trying to build,and they have used this specific css command to block all youtube videos on the home page

ytd-browse[role="main"][page-subtype="home"] #contents {
  visibility: hidden !important;
}

I do not know what ytd-browse is,I have tried searching for instances of 'ytd-browse'in the source html using IDE,however there are no results.

I cannot find any instances of role or page-subtype in in the source html either,I have no idea how this styling works.

CodePudding user response：

The CSS rule you posted is matching an element with id "contents" inside a ytd-browse element whose role attribute is set to "main" and whose page-subtype attribute set to "home".

ytd-browse is a custom

Confusingly, it appears "ytd-browse" is also used as a class name elsewhere on the page (though we know the CSS rule is matching the element because it does not use the .ytd-browse class selector):

CodePudding user response：

Look more carefully at the page source. A quick way to inspect code, press Ctrl Shift C (in a Chrome-based browser) and select an element on the page you want to inspect.

Here is the element in question, it's one of the wrappers on the main content page:

<ytd-browse  responsive-playlist="" page-subtype="home" rich-grid-watch-status="inactive" role="main" guide-persistent-and-visible="">