The video component usually goes into full screen on mobile devices (esp. on iPhones). This makes Retool unusable for my client since components we laid over the video won't be shown anymore in fullscreen mode. I urgently need a feature in Retool that can prevent the user and the mobile device from making the video full screen.
To solve that problem, a new attribute "playsinline" is needed for the component "video".
playsinline:
A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area.
Is there any workaround for this issue? My client can't use Retool for iPhone like this which is quite a problem for him. Or is there any timeline until when such a feature could be implemented?
Hi @Reboon Thanks for this feature request! I'm not sure yet what the timeline would be for something like this to be shipped. In the meantime, you may be able to accomplish this using a custom component as a workaround
@Tress I have tried now to built a custom component, but I ran into the following issue:
In the app, I show the custom component (the video) and controls over it. These control are basically only container component put below the custom component and then layered over the custom component (video) by using CSS.
To start the video, the user MUST click a button first according to browser regulations which don't allow to play a video automatically unmuted with user interaction. This interaction should happen in the custom component. Therefore I made a button in the custom component (video) to start the video. This button works also.
My problem now is that after user hit the start button, I want to show all control of the video, which are, as described before, a container component. But since the user clicked the button, the custom component has the focus, and the container layered over the custom component is hidden (because it seems to be under the custom component).
Is there any way in Retool how I can force the focus on the container so that it will be shown over the video? There is no .focus() function for the container. Can I use JavaScript somehow to set focus on the container?
It seems like I have found a workaround for this issue.
When there are two custom components, and one contains a "Button" and the other one the video. Then clicking the button in the first custom component will signal the page that it's allowed to play the video with sound. So looks like the custom components are in one sandbox and the rest of Retool in another sandbox.
