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 https://i.sstatic.net/s6MVV.jpg

UNMIRRORED IMAGE https://i.sstatic.net/huksK.jpg

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

Focusing in on a PARTICULAR SECTION of the picture

What is the best way to ensure that the child element of a Material UI TableCell Component occupies the full height of the cell?

Using HTML and CSS to evenly align text in individual sections

Mastering the Art of Scrolling

Effortless Table Extraction using PHP's Simple HTML DOM Parser

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

A guide on retrieving information from a database with PHP and transferring it to Javascript

What are effective ways to eliminate script tags from a webpage?

Access the configuration of a web browser

Trouble with Unveiling the Secondary Accordion

Login block for Episerver

How can you iterate over the input elements that are currently visible within a form using Javascript?

JavaScript and AJAX: Dynamically Create URLs

The unique format created by tinyMce is not being displayed

Errors in AMP Validator

Delete the child element if it is present in an HTML document

How to set a custom background image for the Django admin panel

utilizing javascript once form elements are dynamically inserted

Calculate the total sum of selected values in a multiple select dropdown using jQuery

Steps for creating a new tab and refreshing the address bar with a different URL without having to reload the current page