Allow: fullscreen - HTML element

I’m trying to allow fullscreen mode when someone clicks on embedded content within a HTML / iFrame element.

Eg. A user clicks fullscreen icon in a YouTube video.

The functionality works within the editor but not on the published site.

I’ve been trying methods in this documentation but still can’t get it to work.

Guide to the Fullscreen API

Can someone please shed some light how to trigger fullscreen on a published site??

Before I go stripping out parts to see if I have interference from other actions/components, can someone please confirm if in a published site they can trigger ‘fullscreen’ view of any embedded content? Or is this a possible known limitation @aurelie given how the html/iframe elements are being nested in other ww-divs?

I’ve tried isolating the issue and can’t get fullscreen for embedded content such as YouTube or Tableau dashboards etc.

Appreciate the help!

Could you share how you did it inside the editor please ? I will try to dig the issue :slight_smile:

Thanks @Alexis - here’s a loom of my current experience.

Did you tried our youtube plugin ? I will try to investigate your issue but it could help you in the meantime :slight_smile:

Yea just tried the youtube plugin and it works, but the embedded content I’m most interested in expanding to full screen is an embedded Tableau dashboard.

For the purposes of trying to diagnose why it wouldn’t work I was using youtube as a more common content type as an exemplar to the issue I’m experiencing. Hence my curiosity if others, are experiencing a similar behaviour when something is embedded within the HTML element.

1 Like

Ah ok thanks, can I ask you to create a ticket on support.weweb.io ? We need to allow more time on this to figure out what’s the issue, we will handle it in the next two weeks :slight_smile:

Thanks you :pray:

1 Like

Elevating this issue again to see if anyone has a solution. I’ve submitted a ticket but eager for a solution.

The challenge remains that when embedding content in the HTML element, the content won’t enter Full Screen mode in the published application. However, in the editor it works as expected.

DevTools Console:
“Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.”

Hi, I think it’s because the “refresh on resize” option is toggled ON. As the page resize when the fullscreen is setting up, it refresh the element and cancel it, the “refresh on resize” behave only in the published app, it’s probably why the fullscreen works on the Editor

What a simple fix! Thanks @Alexis

Screenshot 2024-07-11 112236

1 Like

Yeah sorry for not seeing it one year ago, I’ve learned a lot since :laughing:

I will take your ticket as an opportunity to change the default setting for this option, should have been turned off from the beginning.