Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Playsinline attribute isn't set on video tag #1072

Open
noyfactor opened this issue Mar 18, 2025 · 5 comments
Open

Playsinline attribute isn't set on video tag #1072

noyfactor opened this issue Mar 18, 2025 · 5 comments

Comments

@noyfactor
Copy link

noyfactor commented Mar 18, 2025 •
edited
Loading

I'm creating a new iframe in the page and initializing a new Player using the iframe:

const iframe = document.createElement('iframe');
iframe.src = url;
iframe.className = 'w-full h-full';
new Player(iframe, {..., playsinline: true, ...})

But the iframe content's video tag remains without a playsinline attribute:

<iframe src="https://player.vimeo.com/video/1044112583?h=4a9110f311" class="w-full h-full" data-ready="true">
  <html lang="en">
    <head>
      {...}
    </head>
    <body class="vp-center">
      <div id="player" class="player player-1c2e052c-3178-4b1a-919f-b9fbfd31d478 js-player-fullscreen with-fullscreen with-sticky-custom-logo touch-support player-normal player-xxs app-xxs no-fullscreen-support right-content-area-supported" style="max-width: calc(177.777778vh); height: calc(56.25vw);">
        {...}
        <div class="vp-video-wrapper transparent content-area-sibling-enabled" data-content-area-sibling-eligible="" aria-hidden="true">
          <div class="vp-video">
            <div class="vp-telecine invisible">
              <video preload="none" tabindex="-1" src="https://vod-adaptive-ak.vimeocdn.com/exp=1742306350~acl=%2F4e1bad92-8898-4f23-8fb0-389d225cbdc2%2F%2A~hmac=12c4edd053a19f4b59f2f384daaedc89217a12b4dbe7c97650de0bc485e5f8c7/4e1bad92-8898-4f23-8fb0-389d225cbdc2/v2/playlist/av/primary/sub/219720087-iw/prot/cXNyPTE/playlist.m3u8?ext-subs=1&amp;omit=av1-hevc-opus&amp;pathsig=8c953e4f~8HnfLgSnXUJd7e_S64xbdhPgp5_sYdsPgqj9DU80c2A&amp;qsr=1&amp;r=dXM%3D&amp;rh=NnytU&amp;sf=ts" disablepictureinpicture="" autopictureinpicture="" style="">
                <track kind="subtitles" src="/texttrack/219720087.vtt?token=67d97c2e_0xc9135ceecd7536f5c0a09e710e2f19f1a9f0abcf" id="telecine-track-219720087" srclang="iw" label="עברית">
              </video>
            </div>
          </div>
        </div>
          {...}
      </div>
    </body>
  </html>
</iframe>

I've tried so far:

  • Getting the iframe from the oEmbed endpoint (no change)
  • Adding the &playsinline=1 parameter to the url (no change)
@noyfactor noyfactor changed the title Player not setting playsinline attribute on video tag Playsinline attribute isn't set on video tag Mar 18, 2025
@mcintyrehh
Copy link
Contributor

Hello @noyfactor! We only add the playsinline attribute on mobile Android and iOS, are you testing on either of these?
We determine user device from the UserAgent string, so if there is any tooling that modifies the default it may be throwing off our check.

@noyfactor
Copy link
Author

Thank you for your rapid response @mcintyrehh ! That's a great point.
I'm initializing the player inside a Zoom app (https://developers.zoom.us/docs/zoom-apps/), which is launched both on desktop and mobile. This is the user agent: "Mozilla/5.0 ZoomWebKit/537.36 (KHTML, like Gecko) ZoomApps/1.0" - is there a way to force mobile behaviors regardless of user agent?

@mcintyrehh
Copy link
Contributor

Hi @noyfactor, thanks for the docs!

We don't have a way to force mobile behaviors so the best option would be if the Zoom Apps API offers a way to send the default UserAgent. It may also be worth testing whether you can override the UA yourself.

I can also look into respecting the playsinline param regardless of the user agent parsing, I will let you know!

@mcintyrehh
Copy link
Contributor

@noyfactor, we're going to update playsinline to be added to the video element by default. This makes way more sense because browsers will ignore the attribute, and we won't have to rely on a UserAgent check.

One note: this won't help with iOS WebViews, where playsinline needs to be configured at the App level.

I'll let you know when we get this out (aiming for Monday), and thanks for bringing this up!

@noyfactor
Copy link
Author

Thank you @mcintyrehh !
And just to make sure - this is the iframe's concern, and not the SDK's - right? there's no way to make that change within player.js ? Also, is there documentation for mobile defaults anywhere? I'd like to make sure I'm not missing anything else experience-wise (the player isn't working in Android at all for me right now, I'm guessing it's the same UA issue)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@noyfactor @mcintyrehh