调整 Google 投射按钮 <google-cast-launcher> 的大小和样式

Question

我有一个加载 Cast 应用程序框架的简单页面：

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

此页面位于 example for a standard cast button 之后：

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

默认情况下，此按钮很大，占据了页面上的所有 space。所以，我尝试用 CSS:

调整它的大小

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

这没有效果。设置显式 height 和 width.

也不行

文档没有帮助：

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

如何设置此按钮的样式？

Answer 1

该元素默认设置为 display: inline - 这些元素既没有可用的宽度属性也没有可用的高度属性。将其设置为 display: inline-block 或 display: block.

Answer 2

这对我来说很好用。请看下面，谢谢。

google-cast-launcher {

浮动：右；

边距：10px 6px 14px 0px;

宽度：40px；

高度：32px；

不透明度：0.7；

background-color: #000;

边框：none；

大纲：none；

}

google-cast-launcher：悬停{

--disconnected-color: 白色;

--connected-color: 白色;

}