I would like to remove progress bar from CAF receiver while playing live stream
Asked
Active
Viewed 817 times
2 Answers
0
https://developers.google.com/cast/docs/caf_receiver/customize_ui
try setting the progress color to a transparent value
cast-media-player {
--progress-color: rgba(0, 0, 0, 0.0);
}
also, use the inspector and check the DOM - this one should be
.player .controls-progress {
display: none;
}

CygnusOlor
- 94
- 4
-
I have tried with with `let playerElement = document.getElementsByTagName("cast-media-player")[0];` `playerElement.style.setProperty('--progress-color', 'rgba(0, 0, 0, 0.0)');` didn't help – Nishant Jul 08 '20 at 19:56
-
it didn't help. – Nishant Jul 20 '20 at 13:45
0
A bit late but for the ones still facing the issue:
cast-media-player
is a custom element, thus, including a shadow DOM you won't change directly.
All full-screen controls seem included in the sub custom element tv-overlay
So you can either access/change this element with:
document.querySelector("cast-media-player").shadowRoot.querySelector("tv-overlay").style.display = 'none';
You can potentially attach a new style sheet element to cast-media-player
from your main page:
var style = document.createElement('style')
style.innerHTML = 'tv-overlay { display:none; }';
document.querySelector('cast-media-player').shadowRoot.appendChild(style)
Eventually, to debug your DOM/css receiver, you can access your receiver page with on Google Chrome though the URL chrome://inspect/#devices
, and then click inspect on your device.

Jeremy Caney
- 7,102
- 69
- 48
- 77

Chris-lu
- 1
- 2