如何创建按钮实现Vimeo视频镜像翻转及恢复正常视图功能

开发者阿泽

2026-9-29

解决方案

你之前的transform: scaleX(-1)失效的核心原因是Vimeo嵌入内容存放于跨域iframe中，你没有权限直接操作iframe内部的<video>元素样式，直接给iframe本身添加transform规则容易受布局属性影响失效，更稳妥的方案是给iframe外层包裹容器添加翻转样式。

完整实现代码

HTML 结构

<!-- Vimeo视频包裹容器 -->
<div class="vimeo-wrapper">
  <!-- 替换src为你自己的Vimeo视频嵌入地址 -->
  <iframe src="https://player.vimeo.com/video/替换为你的视频ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

<!-- 功能操作按钮 -->
<button id="mirror-btn">镜像翻转视频</button>
<button id="reset-btn">恢复正常视图</button>

CSS 样式

.vimeo-wrapper {
  display: inline-block;
  /* 可选：添加翻转过渡动画 */
  transition: transform 0.3s ease;
}

/* 镜像翻转激活类 */
.vimeo-wrapper.mirrored {
  transform: scaleX(-1);
}

JavaScript 逻辑

// 选中对应元素
const vimeoWrapper = document.querySelector('.vimeo-wrapper');
const mirrorBtn = document.getElementById('mirror-btn');
const resetBtn = document.getElementById('reset-btn');

// 绑定镜像翻转事件
mirrorBtn.addEventListener('click', () => {
  vimeoWrapper.classList.add('mirrored');
});

// 绑定恢复正常事件
resetBtn.addEventListener('click', () => {
  vimeoWrapper.classList.remove('mirrored');
});