如何自定义iframe嵌入Vimeo播放器vp-controls内播放条及播放按钮样式

由于浏览器同源策略限制，直接在父页面编写CSS选中跨域Vimeo iframe内部的.vp-controls、.vp-play-bar、.vp-play-button等元素是无效的，外部页面无法直接操作跨域iframe的内部DOM，因此需要通过以下两种可行方案实现样式修改。

方案1：禁用原生控件，自定义控制层（完全可控，无付费要求） #

该方案关闭Vimeo原生控制条，自行在iframe上层实现控制UI，通过Vimeo Player SDK控制播放器状态，样式可完全自主调整，实现步骤如下：

• 第一步：编写HTML结构，嵌入Vimeo播放器时关闭原生控件，添加自定义控制层容器

<div class="vimeo-container">
  <iframe id="vimeo-player" src="https://player.vimeo.com/video/替换为你的视频ID?controls=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  <!-- 自定义控制层 -->
  <div class="custom-controls">
    <button class="custom-play-btn"></button>
    <div class="custom-play-bar">
      <div class="custom-play-progress"></div>
    </div>
  </div>
</div>

• 第二步：编写CSS自定义控件样式，可自由调整背景色、圆角等属性

.vimeo-container {
  position: relative;
  width: 640px;
  height: 360px;
}
/* 控制层固定在播放器底部 */
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px;
  background: rgba(0,0,0,0.6);
  box-sizing: border-box;
}
/* 自定义播放按钮样式 */
.custom-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* 调整圆角 */
  background: #ea4c89; /* 调整背景色 */
  border: none;
  cursor: pointer;
  vertical-align: middle;
}
/* 自定义播放条背景 */
.custom-play-bar {
  width: calc(100% - 52px);
  height: 6px;
  border-radius: 3px; /* 调整圆角 */
  background: #555; /* 调整背景色 */
  margin-left: 12px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  overflow: hidden;
}
/* 自定义播放进度条 */
.custom-play-progress {
  height: 100%;
  border-radius: 3px;
  background: #fff; /* 调整进度条颜色 */
  width: 0;
  transition: width 0.1s linear;
}

• 第三步：提前引入Vimeo Player JS SDK，编写JS绑定控制逻辑

const player = new Vimeo.Player('vimeo-player');
const playBtn = document.querySelector('.custom-play-btn');
const playBar = document.querySelector('.custom-play-bar');
const progressBar = document.querySelector('.custom-play-progress');

// 播放/暂停切换
playBtn.addEventListener('click', () => {
  player.getPaused().then(isPaused => {
    isPaused ? player.play() : player.pause();
  });
});

// 同步按钮状态
player.on('play', () => playBtn.style.opacity = '0.8');
player.on('pause', () => playBtn.style.opacity = '1');

// 同步进度条显示
player.on('timeupdate', (event) => {
  const progressPercent = (event.seconds / event.duration) * 100;
  progressBar.style.width = `${progressPercent}%`;
});

// 点击进度条跳转播放位置
playBar.addEventListener('click', (event) => {
  const clickPositionPercent = event.offsetX / playBar.offsetWidth;
  player.getDuration().then(totalDuration => {
    player.setCurrentTime(totalDuration * clickPositionPercent);
  });
});

方案2：Vimeo企业版原生控件自定义（需付费） #

如果需要保留Vimeo原生控制条的全部功能，你可以开通Vimeo企业版账户，在视频嵌入设置中开启自定义CSS权限，直接在Vimeo后台输入样式代码即可修改原生控件属性，示例样式如下：

/* 修改原生播放按钮 */
.vp-play-button {
  background-color: #ea4c89 !important;
  border-radius: 12px !important;
}
/* 修改原生播放条 */
.vp-play-bar {
  background-color: #fff !important;
  border-radius: 4px !important;
}

该方案无需自行编写控制逻辑，但仅对Vimeo企业版用户开放。

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