Join the Webstudio community

Updated 5 days ago

Vimeo component open in fullscreen (disable inline video)

How do I prevent prevent inline playback on mobile with the Vimeo embed? https://help.vimeo.com/hc/en-us/articles/12425812053265-Inline-playback-on-mobile#:~:text=By%20default%2C%20all%20Vimeo%20videos,fullscreen%20button%20on%20the%20player.

I attempted this with CMS but it didn't work: BaserowItem["my video's url"] + "?playsinline=0"
S
O
49 comments
Thanks. That plus icon was not self-explanatory to me!
can you expand on why?
That also didn't work with the play button
The user has to click the play button and then the play button in the controls. Not sure exactly how that play button is coded
Honestly not sure, it makes sense now that I know. I guess instinctively I thought it was just an accordion icon
we use + icon in all those sections everywhere and everywhere it means "add"
I just don't get it why its hard to understand, you are not the first one to ask the same question not finding how to add
Why not just make it visible by default? Too messy?
like 1000 potential attributes and properties?
Just showing this bar
Attachment
image.png
yeah, that would be just inconsistent with everything else
and you wouldn't need a + button if this is always visible
adds clutter too
I've also thought the same for this
Attachment
image.png
In the learning phase it's been confusing to have important things behind toggles. I keep trying to add styles in the search bar
But if it was visible by default I wouldn't have that issue. And yes, the arrow wouldn't need to exist in that case
same, having both present all the time is super cluttering the UI, which is already very complex
Alright, just an idea. Anyway, do you know why the Webstudio play button doesn't work with playsinline?
haven't tried, please share your published link
I don't see where playsinline is activated
ah you wanted to set it to false to prevent playing inline
I can see the problem, debugging it now
most likely has to do with how we have optimized the player initial loading (no player being initialized at all until user clicks play)
Ok I managed to get it to work and not just for mobile, so I am wondering if this should be indeed only for mobile or desktop as well 🙂
I guess mobile only makes sense
And another thing is that it should be probably playsinline=false for mobile by default, I don't know why anybody would want it to play inline on mobile
Awesome, thanks @Oleg Isonen!
I'm having trouble autoplaying inline videos on IOS now https://klt-visuals.wstd.io/
@Oleg Isonen
Additionally, the user has to click the play button, and then the controls play button, to get a non-inline video to play on mobile.
It auto plays for me, just opened on mobile chrome
The inline background video at the top isn't autoplaying on IOS
The regular videos down the page require two taps
It does on Android. Try googling what could be the reason with vimeo
Single tap works on Android chrome
Love the idea of using Vimeo, but I keep running into these issues when I try to use it
In addition to those issues, there is this gap on Chrome
Attachment
image.png
Problem 1 was fixed by specifying background mode
Attachment
image.png
Ideally the user would only see the preview image, then the video, without the spinner in between.
try eager, so it starts loading sooner
you can also remove webstudio's spinner instance inside there
Already doing that. The issue is the preview image disappears before the video loads
I think issue #2 (Webstudio's play button not working on IOS) is happening because it doesn't automatically open in full screen.
ChatGPT says "There’s no actual <video> or <iframe> element for the requestFullscreen() script to target"
when you go to https://webstudio.is and play the video, does it open full screen for you?
Add a reply
Sign up and join the conversation on Discord