diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index d2fd372..4b6d070 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -61,11 +61,9 @@ html, body {
     flex-flow: column;
 }
 
-#log iframe {
-    width: inherit;
-    min-height: 100vh;
-    height: max-content;
-    border:none;
+.youtube-video {
+    aspect-ratio: 16 / 9;
+    width: 100%;
 }
 
 #body {
diff --git a/public/assets/js/mastodon.js b/public/assets/js/mastodon.js
index d83a245..b01c5d1 100644
--- a/public/assets/js/mastodon.js
+++ b/public/assets/js/mastodon.js
@@ -37,7 +37,7 @@ async function fetchData(log, tpl) {
                 for (let i = 0; i < spl_arr.length; i++) {
                     if (spl_arr[i].indexOf(youtube_link_start) === 0) {
                         let id = spl_arr[i].replace(youtube_link_start, '');
-                        let text_frame = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
+                        let text_frame = `<iframe class="youtube-video" src="https://www.youtube.com/embed/${id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
                         youtube_frame_arr.push(text_frame);
                     }
                 }