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 e6a864af6afb62620b39ac2b5757cbb50424301e..3c6f6bbbe1380329c16413218b9eea3e3fd7e4cb 100644 (file)
--- 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>
         )}
       </>
     );