Use playsinline attributte on Video Player

App Building
, ,
1

  • Goal: At the moment, when a page with a video is loaded in iPhone Safari, when the video plays it becomes full screen. There is an attribute "playsinline" that will stop this. I would like to apply this attribute to the video player.

  • Steps: I have tried targeting the component using custom CSS but no luck. I have also tried running a script on load to add the attribute, but also no luck.

Does anyone have a way of applying this attribute to the Retool video player?

1 Like
3

Hello @SF33

To apply the playsinline attribute to the Video component, please follow these steps:

  1. Select the Video Component
  2. Navigate to the "Event Handlers" Section
  3. Add JavaScript to the On Load/On Render Event
setTimeout(function() {
  const videoElement = document.querySelector('video');
  if (videoElement) {
    videoElement.setAttribute('playsinline', true);
  }
}, 500);
1 Like
4

Hi @SF33! Welcome to the community. :slightly_smiling_face:

Generally speaking, it's not possible to manipulate DOM elements with JS given the fact that the script gets executed in a sandboxed context.

It sounds like you've built a web app that you're just opening in a mobile browser, as opposed to a true mobile app - is that right? If so, the built-in Video component seems to already have the playsinline attribute and, in testing, doesn't play in full screen mode.