diff options
| -rw-r--r-- | assets/css/default.css | 14 | ||||
| -rw-r--r-- | src/invidious/comments.cr | 18 |
2 files changed, 19 insertions, 13 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 4d06b77f..23649f8f 100644 --- a/assets/css/default.css +++ b/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 diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr index ec4449f0..f43e39c6 100644 --- a/src/invidious/comments.cr +++ b/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"> + <iframe class="video-iframe" src='/embed/#{attachment["videoId"]?}?autoplay=0'></iframe> + </div> END_HTML end - - html << <<-END_HTML - </div> - </div> - </div> - END_HTML else nil # Ignore end end |