This works perfectly fine when visiting the site on desktop, but on mobile it changes the dimensions of the video – essentially reducing the height of the embed. It doesn’t crop anything out; it just adds black space on the left and right of the video, which effectively makes the video smaller than it should be.
I am a Softr and coding noob, but I have been googling quite a bit, so I’ve tried changing the height & width to 100% instead of exact pixels, I’ve tried adding a “@media query” inside Style tags in the custom code header (although I admittedly might not have done this correctly), and I’ve also tried adding padding-top 56.25% per some Google results – but to no success.
Thanks a ton for the help! I did not get “auto” to work, but I got the second solution to work on mobile and desktop – with one caveat:
I do get it to work when I enter it as a custom code block; however, my use case is slightly different, in which case I don’t get it to work. Essentially, I’m using the “upvote template” where each item in the list includes a video embed. I.e. I can upvote each video.
So in the list block, I have an “embed” item field where I pull the links from an Airtable (I’ll include a screenshot in a separate post below). Each link in Airtable looks like the one I linked in my first post. But now that I try to reformat it directly in Airtable by entering your recommended code above, it does not seem to be processed correctly. On mobile, it basically looks the same as the code I included in my first post (same dimensions but it also adds a bunch of padding at the top). On desktop, it actually makes it worse (screenshot below). Do you think that’s because a div tag can’t be included in the embed item field? I had imagined that it would work since the iframe tag works, but maybe not? Or maybe I’m just doing something wrong.
Just to clarify: Your second solution does work when I enter it as a custom code block, for both desktop and mobile – thanks a lot for helping out with that. I just don’t get it to work for my use case, where I have multiple videos embedded in the list block. Any thoughts? To hopefully illustrate it better, I’ve attached a screenshot of an example with both of the codes. For the top video of the screenshot, it’s your suggested code (it looks the same regardless of 16by9, 1by1 etc., so something isn’t being read). For the bottom video, it’s the code I included in my first post.
The screenshot is taken from desktop, since this code did not really change anything for mobile (when using it through Airtable).
Thanks a lot again, and sorry for the long post – figured I’d just try to prevent some back and forth!
Since I can only include one attachment per post, here’s the screenshot of what I mean with the “embed” item field. This comes from an Airtable, using either the format I linked above:
The Iframe code is inside a url field in Airtable.
Note that this iframe format would also work with any platforms other than Twitch.
See how it looks on mobile and desktop (Settings of the embed field in Softr = maximum width)
Note 1: that you can enter several attachments per post without any problem
Note 2: You can automate the replacement of “&parent=www.example. com” inside Airtable with formulas
Note 3: here is the url to check how it looks (temporary) nocknock.softr.app - made with softr.io
Thank you for taking the time with this – much appreciated. To clarify about the screenshots: I got a note stating that new users can only add 1 attachment per post.
The URL portion actually already included “&parent=” through Airtable previously, so I haven’t made any changes there. I added the following to each Airtable field now:
But it still creates the same black space on the left and the right of the video on mobile (as seen in your screenshot too). On desktop it looks the same as previously, but with no border and a slightly larger player (because of the increased dimensions). So for some reason the iframe gets slightly different dimensions on mobile, which makes the whole video smaller and more difficult to watch. When looking at that black space from a screenshot on a computer it looks pretty insignificant, but on a small screen (a phone) it makes a big difference.
@matthieu_chateau any thoughts on what might be causing the black borders on mobile? Do you think there’s a way around it? Just thinking since it did work with the custom code block, but not when embedded through Airtable.
@artur The attachments were just about this forum. I just made a comment in my first post that I was unable to add a second screenshot, so I added another post/reply in this same thread for the second screenshot. Not a big deal imo; I feel like the thread got derailed a little bit (I have since been upgraded to a “Basic” user which does give me access to add more screenshots at once).
Re the borders: Specifically in mobile, I’m unable to get rid of the black areas/borders to the left and right of each clip when showing it in a list view, which makes the video player a lot smaller on mobile.
The issue does get resolved when adding a custom code block using the code recommended by Matthieu above, but that same code does not fix the issue when it’s used in the list view (where the code comes from an Airtable field). For my use case, I’m hoping to find a solution for the list view too.
Giving it a final attempt: Any thoughts on how to get a video embed to use the right dimensions on mobile when adding it to a list view? I get it to work when adding it as its own custom code block, but not in a list. Screenshots in the latest reply above ^
?
