From 7fd92c5fe668af60b015633f45594b72b1f1d4e8 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Thu, 28 May 2020 02:25:25 -0500
Subject: [PATCH] fix: make videos bigger + add styles (#38924)

---
 client/src/templates/Challenges/video/Show.js |  6 +++++-
 .../src/templates/Challenges/video/show.css   | 19 ++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Challenges/video/Show.js b/client/src/templates/Challenges/video/Show.js
index dad1909c6c..a290f958a2 100644
--- a/client/src/templates/Challenges/video/Show.js
+++ b/client/src/templates/Challenges/video/Show.js
@@ -196,7 +196,11 @@ export class Project extends Component {
                         : 'hide-youtube-video'
                     }
                     onReady={this.videoIsReady}
-                    opts={{ rel: 0 }}
+                    opts={{
+                      rel: 0,
+                      width: '960px',
+                      height: '540px'
+                    }}
                     videoId={videoId}
                   />
                   <i>
diff --git a/client/src/templates/Challenges/video/show.css b/client/src/templates/Challenges/video/show.css
index ed0eda2eca..09491c451e 100644
--- a/client/src/templates/Challenges/video/show.css
+++ b/client/src/templates/Challenges/video/show.css
@@ -3,10 +3,11 @@
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
+  padding: 20px 0;
 }
 
 .video-placeholder-loader {
-  min-height: 360px;
+  min-height: 540px;
   display: flex;
   align-items: center;
 }
@@ -20,16 +21,21 @@
 }
 
 .video-quiz-options {
-  padding: 1px 16px;
   background-color: var(--tertiary-background);
 }
 
+/* remove bootstrap margin here */
+.video-quiz-options > label {
+  margin: 0;
+}
+
 .video-quiz-option-label {
   display: block;
-  margin: 20px;
+  padding: 20px;
   cursor: pointer;
   display: flex;
   font-weight: normal;
+  border: 2px solid var(--secondary-background);
 }
 
 .video-quiz-input-hidden {
@@ -63,6 +69,13 @@
   transform: translate(-50%, -50%);
 }
 
+/* remove bootstrap properties */
 .video-quiz-option > p {
   margin: 0;
 }
+
+/* remove bootstrap properties */
+.video-quiz-option > pre {
+  padding: 0;
+  margin: 0;
+}