如何让插入YouTube播放器HUD的自定义按钮与原生控件同步淡出

解决方案 #

你要实现同步淡出的需求完全可以不用额外写JS定时器，有两种极简方案，优先推荐第一种：

1. 给你的自定义按钮添加YouTube原生的ytp-button类
   修改你的按钮代码，在class属性里加入ytp-button即可：

   <button class="customClass ytp-button" id="customID" title="custom title"><svg class="customClass"></svg></button>
   

   这个类是YouTube所有控制栏按钮默认携带的类，原生CSS已经内置了对应ytp-autohide（HUD自动隐藏时播放器根元素会自动添加的类）的透明度过渡规则，加完之后你的按钮会自动和原生按钮完全同步显隐，还能直接复用原生按钮的hover、点击样式，不需要额外写任何代码。
2. 自定义CSS规则适配原生显隐逻辑
   如果你不想用原生的ytp-button样式，只需要给你的扩展加几行CSS即可，不需要JS逻辑：

   /* 匹配YouTube HUD自动隐藏的场景，同步隐藏自定义按钮 */
   .ytp-autohide .customClass {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1);
   }
   

   这里的过渡参数和YouTube原生控制栏的淡出参数完全一致，不会出现显隐不同步的问题。

内容的提问来源于stack exchange，提问作者Armaan Shah