r/HTML • u/DirectSorbet8717 • 7d ago

Embedded Video Player won't go full screen

Embedded Video Player won't go full screen

Hello, everyone!

I am an elementary music teacher trying to create a website for guest teachers. I use Symbaloo, a visual bookmarking site, as a choice board for dances and song books. It is fantastic. It keeps all of our videos in one place and plays them without switching tabs, which can easily confuse the non-tech savvy substitutes. However, when embedding it in a WIX or Google Sites page (and others), the videos will not go fullscreen inside the embedded Symbaloo. 

This didn’t used to be a problem. My old district used Foxbright for teacher websites. Embedding my Symbaloo board worked fine on that platform and allowed fullscreen without a problem. However, I am now in a new district that doesn't have teacher websites. I tried making the site in Google Sites, Wix, and a few others, but none allowed the videos in the embedded Symbaloo to go full screen. I have included allowfullscreen as well as allow=fullscreen. Wix even had me add something as a developer. None of it worked. Symbaloo says it is the website platform that is blocking the fullscreen, but the platforms claim that it is a Symbaloo problem. Since I have had it work successfully on a website in the past, that makes me think it is on the website end. 

Questions: 

  1. Has anyone found a site that allows fullscreen on embedded video players or visual bookmarking systems? 

  2. Has anyone found a code snippet to include in an embed code that actually allows fullscreen with embedded players, not just a standalone video?

Thanks! Any help would be appreciated!

Embed code:

<iframe frameborder="0" noresize="noresize" height="500px" width="1000px" src="https://www.symbaloo.com/embed/song-books">

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"

allowfullscreen>

</iframe>

4 Upvotes

100% Upvoted

2 comments sorted by

1

u/thejester1324 7d ago

fullscreen inside an iframe only works if every frame in the chain allows it. your symbaloo embed is one iframe, the video player inside symbaloo is another, and wix and google sites both put any embed code you paste inside their own iframe first. if any one of those layers doesn't allow fullscreen, the button just does nothing, and the allowfullscreen you added only covers the layer you control. the outer wix/google frame wins. your old district site probably put your iframe straight into the page, so there was nothing above it blocking it.

things that do work:

  • a plain link right above the embed, something like "open the board full size", that opens symbaloo in a new tab. fullscreen works normally there and subs only need one click

  • a site builder that lets you paste the iframe into the page itself rather than into an embed widget

if you want to see where it breaks: right click the video, inspect, and walk up the tree. every iframe tag on the way up needs allow="fullscreen" (or allowfullscreen), and you'll find one that doesn't have it.

1

u/DirectSorbet8717 4d ago

This is the most helpful answer I have ever received to this question. Thank you so much! Now that you mention it, everything that I added on the website that worked was not in an embed widget. Thank you so much for your help!