如何在智能手机上放大Vimeo播放器控制按钮？

方案一：自定义独立大尺寸全屏按钮（推荐） #

利用Vimeo Player API直接控制播放器全屏，完全绕过原生控制栏的限制，步骤如下：

1. 初始化Vimeo Player实例
2. 创建自定义按钮并设置大尺寸样式
3. 绑定点击事件调用全屏API

代码示例：

<!-- 播放器容器 -->
<div class="vimeo-container">
  <iframe id="vimeo-player" src="https://player.vimeo.com/video/你的视频ID" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  <!-- 自定义全屏按钮 -->
  <button class="custom-fullscreen-btn">全屏</button>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  // 初始化播放器
  const player = new Vimeo.Player('vimeo-player');
  
  // 绑定自定义按钮事件
  document.querySelector('.custom-fullscreen-btn').addEventListener('click', async () => {
    try {
      await player.requestFullscreen();
    } catch (error) {
      console.error('全屏请求失败:', error);
    }
  });
</script>

<style>
/* 自定义按钮样式，确保移动端足够大 */
.custom-fullscreen-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.vimeo-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

#vimeo-player {
  width: 100%;
  height: auto;
}
</style>

方案二：强制放大原生控制栏按钮 #

如果不想新增按钮，可以通过CSS穿透iframe（需注意浏览器兼容性和Vimeo的样式更新），针对移动端媒体查询放大按钮：

/* 针对移动端屏幕 */
@media (max-width: 768px) {
  /* 定位Vimeo播放器控制栏的全屏按钮 */
  .vimeo-container iframe[data-vimeo-player] ~ div .vp-controls__item--fullscreen {
    width: 50px !important;
    height: 50px !important;
    padding: 10px !important;
  }
  
  /* 可选：放大所有控制按钮 */
  .vimeo-container iframe[data-vimeo-player] ~ div .vp-controls__item {
    min-width: 45px !important;
    min-height: 45px !important;
  }
}

注意：Vimeo的控制栏类名可能随版本更新变化，若失效需通过浏览器开发者工具重新定位最新选择器。

额外提示 #

• 自定义按钮建议添加视觉反馈（比如点击时的样式变化），提升用户体验
• 使用Player API时，确保播放器iframe加载完成再初始化实例，可通过player.ready()方法确认时机

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