React: Bug with embedded slides/iframe on mobile

[ingikim]

Do you want to request a _feature_ or report a _bug_?
bug

What is the current behavior?
Google slides doesn't show full screen mode button. The allowFullscreen attribute is set to a truthy value.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
https://jsfiddle.net/ingikim/n1wjmw9k/

What is the expected behavior?
I expect the slide to display full screen on mobile.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I am trying this in chrome and safari. I am using the latest jsfiddle available react version and in my application react 15.1.0

[aweary]

@ingikim have you tried this outside of JSFiddle? I believe you'll run into issues there, as it's already running in an iframe.

[ingikim]

@Aweary Yes, I've tried this outside of JSFiddle. Full screen mode is working on desktop browser. But it's not showing the full screen button on mobile.

[brigand]

@ingikim there's a warning in the console indicating that the capitalization is wrong. It should be allowFullScreen. It still doesn't work in the fiddle, but it does add the attribute to the iframe element in the dom.

The vendor prefixed versions aren't supported apparently. React could handle the prefixes itself whenever allowFullScreen is provided, if it doesn't already.

[ingikim]

@brigand Thanks for letting me know. It's typo. I put allowFullScreen in my website. The full screen button appears on desktop browser. But it doesn't appear on mobile browser. So I can't make a google slide to full screen mode on mobile.

[zpao]

If the attribute is there & it's working on desktop, I don't know that there's much else we can do. It sounds like this might be a limitation of mobile browsers.

FWIW prefixes should be unnecessary unless you're supporting older browsers. It has been unprefixed for sometime in more major browsers. If you suspect that's the issue though, you could try setting those attributes manually in componentDidMount.

[aweary]

The full screen button appears on desktop browser. But it doesn't appear on mobile browser.

I'd have to look at it, but it sounds like it might be a issue with the responsive UI of your embed? I think we've had other reports of this before with Google Slides, I'll have to look when I get home.

[aweary]

The other issue was https://github.com/facebook/react/issues/7467. I tested locally and verified that using allowFullScreen with this iframe works as expected in Chrome. I did test it in the iOS simulator and also verified that the fullscreen icon does not appear.

This is likely either an issue with Google Slides or something they explicitly disallowed--hard to say. Either way, you may want to direct your question to Google's product support platform. I'm going to close this out as there's nothing actionable for us here, but feel free to ask any clarifying questions here 👍

[ingikim]

@zpao Thanks for your answer.

@Aweary Thanks for your help. Yes, I'll ask it to Google 's product support platform. I really appreciate your answer.