Popup seems to work well now in test

slaeforms/static/styles.css

@@ -23,17 +23,6 @@ dialog .iframe-container{
     margin-top: 20px;
 }
 
-.dialogCloseBtn {
-    margin-bottom: 10px;
-    margin-left: auto;
-    display: block;
-}
-
-.dialogCloseBtn img{
-    padding: 8px;
-    width: 50px;
-}
-
 .dialog-content {
     width: 300px;
     height: 200px;
@@ -46,23 +35,22 @@ dialog .iframe-container{
     font-size: 25px;
 }
 
-.close-btn {
-    position: absolute;
-    top: -20px;
-    right: -20px;
-    width: 30px;
-    height: 30px;
-    background-color: #f44336;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
+.dialogBtn {
+    width: 90px;
+    height: 90px;
+    padding: 8px;
+    position: fixed;
+    top: 20px;
+    left: 80vw;
 }
 
+.infoButtonIcon {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+
+
 
 
 .container {

slaeforms/templates/popuptest.html

@@ -12,10 +12,10 @@
 
     <dialog>
 
-        <button class="dialogCloseBtn"autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
+        <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
             alt="Delete Icon"></button>
         <div class="iframe-container">
-            <iframe class="center" src="https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70" title="YouTube video player" frameborder="0"
+            <iframe class="center" src="https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522" title="YouTube video player" frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowfullscreen></iframe>
         </div>
@@ -27,7 +27,8 @@
             or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p>
         </div>
         </dialog>
-      <button>Show the dialog</button>
+      <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon" src="{{ url_for('static', filename='icons/info-icon.png')}}"
+        alt="Info Icon"></button>
       
     <div class="textblock">
     <p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later.