From: David Palmer <david.palmer@adscale.co.nz>
Date: Wed, 21 Jun 2023 04:15:02 +0000 (+1200)
Subject: wrap video embeds in the ratio container
X-Git-Url: http://these/git/%22%7Burl%7D/%22https:/image.com/%7B%60%24%7BghostArchiveUrl%7D/%7BcommunityRss%7D?a=commitdiff_plain;h=9858514bb4605070096637e87a8109bceb0d6d85;p=lemmy-ui.git

wrap video embeds in the ratio container

This should correctly size the embedded video iframe to the full
available width, which looks better and is compatible with mobile
devices.

Also add the "allowfullscreen" modifier to the iframe so that the video
can be expanded to the browser's fullscreen mode.

Also add the post.embed_title as the iframe "title" attribute.
---

diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index e6a864a..3c6f6bb 100644
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@@ -75,10 +75,14 @@ export class MetadataCard extends Component<
           </div>
         )}
         {this.state.expanded && post.embed_video_url && (
-          <iframe
-            className="post-metadata-iframe"
-            src={post.embed_video_url}
-          ></iframe>
+          <div className="ratio ratio-16x9">
+            <iframe
+              allowFullScreen
+              className="post-metadata-iframe"
+              src={post.embed_video_url}
+              title={post.embed_title}
+            ></iframe>
+          </div>
         )}
       </>
     );