CODEWITHSUNDEEP
csschromecastgoogle-castgoogle-cast-sdk
Brad
Brad

Reputation: 163528

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?

Upvotes: 0

Views: 1673

Answers (2)

Anjaneesh Rayapati
Anjaneesh Rayapati

Reputation: 581

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;

}

Upvotes: 2

CygnusOlor
CygnusOlor

Reputation: 104

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.

Upvotes: 1

Related Questions