Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

Question

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

<video controls>
</video>

video {
 transform: scaleX(-1)
}

This CSS code flips the video horizontally, but it also flips the control buttons along with it.

I attempted to flip the wrapper element containing the video using .wrapper {transform: scaleX(-1), but it did not solve the issue.

Since I am not proficient in creating custom video controls from scratch, I am seeking a solution that involves only CSS like transform: scaleX().

How can I achieve a mirrored effect on the video itself while keeping the control buttons unaffected?

MIRRORED IMAGE

UNMIRRORED IMAGE

html css video

Answer 1

Answer №1

If you're looking for a simple solution, you can hide the default video controls, flip the video horizontally, and create your own custom controls. Below is a basic example that you can modify to suit your needs.

const video = document.getElementById('videoPlayer');
const playPauseButton = document.getElementById('playPause');
const muteToggleButton = document.getElementById('muteToggle');
const fullscreenToggleButton = document.getElementById('fullscreenToggle');
const progressBarContainer = document.getElementById('progressBarContainer');
const progressBarFilled = document.getElementById('progressBarFilled');
const timeDisplay = document.getElementById('timeDisplay');

function togglePlayPause() {
  if (video.paused) {
    video.play();
    playPauseButton.textContent = 'Pause';
  } else {
    video.pause();
    playPauseButton.textContent = 'Play';
  }
}

function toggleMute() {
  video.muted = !video.muted;
  muteToggleButton.textContent = video.muted ? 'Unmute' : 'Mute';
}

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

function updateProgressBar() {
  const percentage = (video.currentTime / video.duration) * 100;
  progressBarFilled.style.width = percentage + '%';
  updateTimerDisplay();
}

function seek(e) {
  const newTime = (e.offsetX / progressBarContainer.offsetWidth) * video.duration;
  video.currentTime = newTime;
}

function updateTimerDisplay() {
  const formattedCurrentTime = new Date(video.currentTime * 1000).toISOString().substr(14, 5);
  const formattedDuration = new Date(video.duration * 1000).toISOString().substr(14, 5);
  timeDisplay.textContent = `${formattedCurrentTime} / ${formattedDuration}`;
}

playPauseButton.addEventListener('click', togglePlayPause);
muteToggleButton.addEventListener('click', toggleMute);
fullscreenToggleButton.addEventListener('click', toggleFullscreen);
progressBarContainer.addEventListener('click', seek);
video.addEventListener('timeupdate', updateProgressBar);

.video-container {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.video-container video {
  transform: scaleX(-1);
  width: 100%;
  height: auto;
}

.video-controls {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px -5px 5px 5px;
}

.video-controls button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.progress-bar-container {
  flex-grow: 1;
  cursor: pointer;
  margin-right: 10px;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background: #666;
  position: relative;
}

.progress-bar-filled {
  background: #fff;
  height: 100%;
  width: 0;
}

.time {
  font-size: 0.8em;
  margin-right: 10px;
}

<div class="video-container">
  <video id="videoPlayer">
    <source src="https://uce23327b0bab5175c1c0c0cbc0a.dl.dropboxusercontent.com/cd/0/inline/CJhjJhXufoSbuAopjZ-4fWNFBDaEyp-tZ_08YeqLy-avay9VQ4coVwwdsfHZWhB9S7W6oOzxpx-e2R6Mj5Fa1QzbkumZOHOlNhHpud84YbApN3-tZHbuLrCQgakMIQ6YQRlu6I2GrK_UwdAqmaEdELw6/file#" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="video-controls">
    <button id="playPause">Play/Pause</button>
    <button id="muteToggle">Mute/Unmute</button>
    <button id="fullscreenToggle">Fullscreen</button>
    <div class="progress-bar-container" id="progressBarContainer">
      <div class="progress-bar">
        <div class="progress-bar-filled" id="progressBarFilled"></div>
      </div>
    </div>
    <div class="time" id="timeDisplay">00:00 / 00:00</div>
  </div>
</div>

Answer 2

If you're looking for a simple solution, you can hide the default video controls, flip the video horizontally, and create your own custom controls. Below is a basic example that you can modify to suit your needs.

const video = document.getElementById('videoPlayer');
const playPauseButton = document.getElementById('playPause');
const muteToggleButton = document.getElementById('muteToggle');
const fullscreenToggleButton = document.getElementById('fullscreenToggle');
const progressBarContainer = document.getElementById('progressBarContainer');
const progressBarFilled = document.getElementById('progressBarFilled');
const timeDisplay = document.getElementById('timeDisplay');

function togglePlayPause() {
  if (video.paused) {
    video.play();
    playPauseButton.textContent = 'Pause';
  } else {
    video.pause();
    playPauseButton.textContent = 'Play';
  }
}

function toggleMute() {
  video.muted = !video.muted;
  muteToggleButton.textContent = video.muted ? 'Unmute' : 'Mute';
}

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

function updateProgressBar() {
  const percentage = (video.currentTime / video.duration) * 100;
  progressBarFilled.style.width = percentage + '%';
  updateTimerDisplay();
}

function seek(e) {
  const newTime = (e.offsetX / progressBarContainer.offsetWidth) * video.duration;
  video.currentTime = newTime;
}

function updateTimerDisplay() {
  const formattedCurrentTime = new Date(video.currentTime * 1000).toISOString().substr(14, 5);
  const formattedDuration = new Date(video.duration * 1000).toISOString().substr(14, 5);
  timeDisplay.textContent = `${formattedCurrentTime} / ${formattedDuration}`;
}

playPauseButton.addEventListener('click', togglePlayPause);
muteToggleButton.addEventListener('click', toggleMute);
fullscreenToggleButton.addEventListener('click', toggleFullscreen);
progressBarContainer.addEventListener('click', seek);
video.addEventListener('timeupdate', updateProgressBar);

.video-container {
  position: relative;
  width: 100%;
  max-width: 640px;
}

.video-container video {
  transform: scaleX(-1);
  width: 100%;
  height: auto;
}

.video-controls {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px -5px 5px 5px;
}

.video-controls button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.progress-bar-container {
  flex-grow: 1;
  cursor: pointer;
  margin-right: 10px;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background: #666;
  position: relative;
}

.progress-bar-filled {
  background: #fff;
  height: 100%;
  width: 0;
}

.time {
  font-size: 0.8em;
  margin-right: 10px;
}

<div class="video-container">
  <video id="videoPlayer">
    <source src="https://uce23327b0bab5175c1c0c0cbc0a.dl.dropboxusercontent.com/cd/0/inline/CJhjJhXufoSbuAopjZ-4fWNFBDaEyp-tZ_08YeqLy-avay9VQ4coVwwdsfHZWhB9S7W6oOzxpx-e2R6Mj5Fa1QzbkumZOHOlNhHpud84YbApN3-tZHbuLrCQgakMIQ6YQRlu6I2GrK_UwdAqmaEdELw6/file#" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="video-controls">
    <button id="playPause">Play/Pause</button>
    <button id="muteToggle">Mute/Unmute</button>
    <button id="fullscreenToggle">Fullscreen</button>
    <div class="progress-bar-container" id="progressBarContainer">
      <div class="progress-bar">
        <div class="progress-bar-filled" id="progressBarFilled"></div>
      </div>
    </div>
    <div class="time" id="timeDisplay">00:00 / 00:00</div>
  </div>
</div>

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

Answer №1

Similar questions

Is it possible to use a figure tag as a fancybox link?

creating a table displaying data in a horizontal format sourced from ajax/json transformation

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Tips for maintaining HTML lines within an 80-character limit

Connect button with entry field

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Using jQuery to apply gradient fill to SVG elements

Begin the div at a width of 0 pixels and expand it towards the right

Confirming the accuracy of multiple fields in a form

At 400 pixels screen size, the buttons in the appBar component are spilling out

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Display elements exclusively when the class XY is in an active state using JavaScript

Use CSS properties to isolate and extract the logo from the Sprite image

Embedded Youtube code saved in database is not displaying on HTML form

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Tips for loading images dynamically (or lazily) as they come into the user's view with scrolling

Stripping CSS prefixes upon file initialization

Tips for customizing column width in v-simple-table with Vuetify.js component

How to easily upload zip files in Angular 8

Unable to reveal hidden text with invisible formatting (font-size: 0)