Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Videoscaling works, but startpage layout broken

Browse Source
This commit is contained in:
Jan 2024-06-06 17:52:58 +02:00
parent bd750eb9a2
commit 0a180eac6f
3 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
slaeforms/static/styles.css
View File

@ -97,7 +97,22 @@ iframe {
margin: auto; 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 { form {
text-align: center; text-align: center;

2
slaeforms/templates/standard_template.html
View File

@ -7,10 +7,12 @@
{% if (title != "") %} {% if (title != "") %}
<h3>{{title}}</h3> <h3>{{title}}</h3>
{% endif %} {% endif %}
<div class="video-container">
<iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player" <iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
frameborder="0" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> allowfullscreen></iframe>
</div>
</div> </div>
{% else %} {% else %}
{{code}} {{code}}

2
slaeforms/templates/teststartpage.html
View File

@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div class="container">
<h2>Hello! Thank you for participating in our study!</h2> <h2>Hello! Thank you for participating in our study!</h2>
<form action="http://localhost:5000/teststart" method="post"> <form action="http://localhost:5000/teststart" method="post">
<label for="terms-and-conditions"> <label for="terms-and-conditions">
@ -16,6 +17,7 @@
<p><input id="submitbutton" type = "submit" value = "submit" /></p> <p><input id="submitbutton" type = "submit" value = "submit" /></p>
</form> </form>
</div>
</body> </body>
</html> </html>