From c5e86c19e805a3e4be5dfac10b1f996a07c4e2f6 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Fri, 2 Aug 2024 11:56:06 -0600
Subject: [PATCH] Centering video player in VideoPage.

---
 app/src/App.css                   | 5 +++++
 app/src/components/VideoPlayer.js | 1 +
 2 files changed, 6 insertions(+)

diff --git a/app/src/App.css b/app/src/App.css
index 00b4b5ae..e67c5e3a 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -245,3 +245,8 @@ textarea.otp {
 .divider.inverted {
     color: rgb(255, 255, 255, 0.6) !important;
 }
+
+.video-player {
+    display: block;
+    margin: 0 auto; /* Center the video horizontally */
+}
diff --git a/app/src/components/VideoPlayer.js b/app/src/components/VideoPlayer.js
index 78a601de..6c2d14ca 100644
--- a/app/src/components/VideoPlayer.js
+++ b/app/src/components/VideoPlayer.js
@@ -350,6 +350,7 @@ function VideoPage({videoFile, prevFile, nextFile, fetchVideo, ...props}) {
         </Container>
 
         <video controls
+               class='video-player'
                autoPlay={props.autoplay !== undefined ? props.autoplay : true}
                poster={posterUrl}
                id="player"