Resizing and styling the Google Cast button

Question

I have a simple page where I'm loading the Cast Application Framework:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

This page follows the example for a standard cast button:

<google-cast-launcher></google-cast-launcher>

By default, this button is huge and takes up all the space on the page. So, I try to resize it with CSS:

google-cast-launcher {
  max-width: 2em;
}

This has no effect. Neither does setting explicit height and width.

The documentation is not helpful:

You can apply any additional styling, such as size or positioning, to the element as necessary.

How do I style this button?

Answer 1

This works fine for me. Please see below, thanks.

google-cast-launcher {

float: right;

margin: 10px 6px 14px 0px;

width: 40px;

height: 32px;

opacity: 0.7;

background-color: #000;

border: none;

outline: none;

}

google-cast-launcher:hover {

--disconnected-color: white;

--connected-color: white;

}

Answer 2

The element is set to display: inline by default - those have neither width or height attributes available. Set it to display: inline-block or display: block.