LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-30 00:01:15 +00:00
Code Issues Projects Releases Wiki Activity

wrap video embeds in the ratio container

Browse source 
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
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/shared/components/post/metadata-card.tsx
View file

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