Videoscaling works, but startpage layout broken

2024-06-06 17:52:58 +02:00 · 2024-06-06 17:52:58 +02:00 · 0a180eac6f
commit 0a180eac6f
parent bd750eb9a2
3 changed files with 19 additions and 0 deletions
--- 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;
--- a/slaeforms/templates/standard_template.html
+++ b/slaeforms/templates/standard_template.html
@ -7,11 +7,13 @@
    {% 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}}
 {% endif %}
--- 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>