Search code examples
csschromecastgoogle-castgoogle-cast-sdk

Resizing and styling the Google Cast button <google-cast-launcher>

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?

Solution

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