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.
This commit is contained in:
David Palmer 2023-06-21 16:15:02 +12:00
parent bc658a80a4
commit 9858514bb4
No known key found for this signature in database
GPG key ID: A5B29F556187B3DE

View file

@ -75,10 +75,14 @@ export class MetadataCard extends Component<
</div>
)}
{this.state.expanded && post.embed_video_url && (
<div className="ratio ratio-16x9">
<iframe
allowFullScreen
className="post-metadata-iframe"
src={post.embed_video_url}
title={post.embed_title}
></iframe>
</div>
)}
</>
);