iOS and Twenty-Twenty-Two: “Your browser doesn’t support fullscreen.”

@marcdk Are you sure that this has to do with the WP version and the plugin? I’d bet that this issue will happen with any theme and plugin that uses the official Youtube video player. It’s very likely an issue with iOS or the mobile browser you’re using. Please try a different theme and see if the issue persists; it probably does persist.

Yes, it persists in different themes. Most recent iOS version on iPhone 12 and safari. But who rendered the embed code? Your plug-in or the WP core? I think only the html5 attribute ?fullscreen“ is missing to allow the embed going fullscreen.

It’s not the attribute. This works fine: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_youtubeiframe_autoplay

I checked your blog post and yes, the plugin is responsible for loading the embed code. The embed code I’m currently using in the plugin is based on the embed code that you’d get from Youtube’s sharing button.

Can you copy and paste below code snippet to that w3schools page and see if fullscreen works for all six videos? If they all work, then I’ve no idea what’s broken. (I don’t have an iPhone myself for testing…)

<br>1)
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

<br>2)
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<br>3)
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<br>4)
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<br>5)
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<br>6)
<iframe width="744px" height="419px" style="vertical-align:top; height: 419px; width: 744px" src="https://www.youtube.com/embed/yBhefH-AEtM?autoplay=1&modestbranding=1&rel=0&iv_load_policy=3&color=red" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Can you also share the link from the “Find out more” popup in your screenshot so that I can check what Youtube recommends doing? Have you followed their advice in that article?

I discovered that the “allowfullscreen” attribute is considered a legacy attribute, even though it’s still used in the embed code that Youtube videos provide via their share button. Instead,?allow="fullscreen" should be used. I updated the plugin accordingly. Maybe this solves your issue? Try updating to plugin version 2.16.5

This still is not working on iOS. :/ Sorry.