CSS: Fix iframe attachment size in community posts

assets/css/default.css

@@ -330,6 +330,20 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
   margin: auto;
 }
 
+.video-iframe-wrapper {
+  position: relative;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+
+.video-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
 
 /*
  * Footer

src/invidious/comments.cr

@@ -372,27 +372,19 @@ def template_youtube_comments(comments, locale, thin_mode, is_replies = false)
           </div>
           END_HTML
         when "video"
-          html << <<-END_HTML
-            <div class="pure-g">
-              <div class="pure-u-1 pure-u-md-1-2">
-                <div style="position:relative;width:100%;height:0;padding-bottom:56.25%;margin-bottom:5px">
-          END_HTML
-
           if attachment["error"]?
             html << <<-END_HTML
+            <div class="pure-g video-iframe-wrapper">
               <p>#{attachment["error"]}</p>
+            </div>
             END_HTML
           else
             html << <<-END_HTML
-              <iframe id='ivplayer' style='position:absolute;width:100%;height:100%;left:0;top:0' src='/embed/#{attachment["videoId"]?}?autoplay=0' style='border:none;'></iframe>
+            <div class="pure-g video-iframe-wrapper">
-            END_HTML
+              <iframe class="video-iframe" src='/embed/#{attachment["videoId"]?}?autoplay=0'></iframe>
-          end
-
-          html << <<-END_HTML
-                </div>
-              </div>
             </div>
             END_HTML
+          end
         else nil # Ignore
         end
       end