Hooked on Tennis
Embed
For the website. Phones should open a game full screen. Do not use a 900px-tall iframe with scrolling turned on.
A · Cards only
Recommended. A short intro and buttons. No iframe, so the phone page does not grow a second scrollbar. Each link leaves the frame and opens the game on the full page. The browser back button returns here.
B · Optional preview
One short iframe if you want a peek on desktop. Height is min(70dvh, 560px), scrolling is no, and the full-screen link sits above it. Never 900px.
What was going wrong
The live page used a 900px iframe with scrolling="yes". That is taller than a phone, so the Squarespace page scrolled through the frame. Inside it, the board started open and had its own scrollbar, and the list inside the board scrolled again. The serve button sat at the bottom of that tall frame, often below the screen.
These pages detect the frame, keep the play area inside the visible height, start with the board closed, and put Open full screen at the top. That link uses target="_top", so a phone can leave the iframe.