Allow fullscreen on embedded video

Anvil Q&A
1

Is it possible to allow an embedded to go full screen?

Example of the trouble I’m experiencing here: https://www.useloom.com/share/6a4bd5e349b7462e883f77eb587d4a81

Additionally, I’ve attempted setting the allowfullscreen attribute within an iframe, to no avail:

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.useloom.com/share/6a4bd5e349b7462e883f77eb587d4a81" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

Any thoughts?

1 Like
2

Hi Chris,

Off the top of my head, something like that should work. Can you give us the Clone link of an app that demonstrates this issue? That would help us track it down.

3

Certainly: https://PZV7BGFLPI7JXSBX.anvil.app/RG5B5IA2FUJBBEZ74SYJPSWR

4

Hi Chris,
the way you create a clone is to click the “gear” icon in the app browser, select “Publish” and towards the bottom there is an option to allow others to copy the app. That’s the link @meredydd is asking for. That way he can see you code and the results.

image

2 Likes
5

Hi Chris,

The video in your app goes fullscreen successfully for me in Firefox, Chrome and Safari on MacOS.

This sounds like it might be a platform-dependent bug. What browser and OS is giving you the issue?

(Re. clone links: it is a link of the format

https://anvil.works/build#clone:{app-id}={clone-token}

for example,

https://anvil.works/build#clone:SRBBJTQLTOX3E2JB=2ZNALIKXRW5IWEAEDS2MJJMO

It can be found at the bottom of the Publish App dialog, or the middle of the Share App dialog. Anybody with a clone link can copy your app into their account, so only share it with people you are happy to see your code and Data Tables data.)

6

Thanks, I moved a little to hastily and just grabbed the first link I saw!

7

Interesting.

I’m using Chrome on Linux Mint (Cinnamon 19.1)

Clone link attempt #2 - https://anvil.works/build#clone:PZV7BGFLPI7JXSBX=6Z2UP4FMMWOB2HGXG6A7RWJT

8

Aha - fullscreen mode works fine in the published app, but not when you run the app from the development environment. This is also the case with the built-in YouTubeVideo component, although the YouTube video handles it by saying ‘Full screen is unavailable’.

57

So, not a platform issue, just an artifact of running an embedded video inside an app inside an IDE! Are you OK testing full-screen mode in the published version of the app, or do you need it in the IDE?

(Just to check, does full-screen work for you when you view the app via the published link? https://PZV7BGFLPI7JXSBX.anvil.app/RG5B5IA2FUJBBEZ74SYJPSWR )

1 Like
9

Ha! Thanks, it does work for me in published mode. This is good news.

1 Like