Embed video Thumbnail black bars on mobile (Wistia)

dev
1

Wistia videos embed automatically when we paste the public media URL in Discourse. Everything is fine on tablet and computer. But, on phone, the thumbnail have some weird black bars.

The thumbnail for youtube videos on phone works great.

When I searched the forum, it seems like a fix was provided by the team for youtube in 2023. Would it be possible to fix the CSS bug for Wistia too ? Thanks.

https://support.wistia.com/medias/26sk4lmiix

https://support.wistia.com/medias/26sk4lmiix

image

1 Like
2

Here’s a CSS solution that maintains the aspect ratio without a fixed height:

iframe[src*="wistia.net"] {
    aspect-ratio: 16 /9;
    height: auto;
}
2 Likes
3

Thanks for taking the time to answer Arkshine. That looks like a great solution. I am a user of a discourse community, not an admin, can I apply css directly to one of my post in the community or a developer will need to add that to github ?

Example if the video url was

https://support.wistia.com/medias/26sk4lmiix
1 Like
4

No, that’s not something you can apply directly. You can always ask the admin of your discourse community if they can and are willing to add this piece of CSS. Ultimately, that’s something that needs to be improved in Discourse for sure.

2 Likes
5

Okay thanks for the answer :slight_smile: I appreciate it :slight_smile:

They are not that tech savvy so they will definitely prefer waiting for the CSS fix in the Discourse platform. This way, the fix will be pushed automatically when they update the software.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.