diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css
index 3e1886a..2d6e90b 100644
--- a/slaeforms/static/styles.css
+++ b/slaeforms/static/styles.css
@@ -97,7 +97,22 @@ iframe {
     margin: auto;
 }
 
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    background: #000;
+}
 
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
 form {
     text-align: center;
diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html
index b138540..072c4e5 100644
--- a/slaeforms/templates/standard_template.html
+++ b/slaeforms/templates/standard_template.html
@@ -7,10 +7,12 @@
     {% if (title != "") %}
     <h3>{{title}}</h3>
     {% endif %}
+    <div class="video-container">
     <iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowfullscreen></iframe>
+    </div>
 </div>
 {% else %}
 {{code}}
diff --git a/slaeforms/templates/teststartpage.html b/slaeforms/templates/teststartpage.html
index 8fecf26..e2d36d7 100644
--- a/slaeforms/templates/teststartpage.html
+++ b/slaeforms/templates/teststartpage.html
@@ -8,6 +8,7 @@
 </head>
 
 <body>
+    <div class="container">
     <h2>Hello! Thank you for participating in our study!</h2>
     <form action="http://localhost:5000/teststart" method="post">
     <label for="terms-and-conditions">
@@ -16,6 +17,7 @@
         
         <p><input id="submitbutton" type = "submit" value = "submit" /></p>
     </form>
+</div>
 </body>
 
 </html>
\ No newline at end of file
