The problem is the basic grid element in WordPress. It might not be responsive for all users; it probably is fixed. I had it set up in a desktop environment and never tested it on my phone until recently! I thought (for whatever reason) that a grid re-shapes to fit various mobile devices. It does NOT.
Here’s the fix to make a grid of embedded YouTube videos responsive, and screenshots of before and after.
The simple fix that makes a grid responsive
Select your grid of YouTube videos (the grid not an individual embedded video). Look at the Block editing tools in the right pane of the post editor screen. It will show the current setting is grid. Nearby is the “group” element. That’s a much better choice so click Group.
The videos will now appear without a grid, and will appear one after the other. It looks huge on a desktop, and just right on a phone. I’ll fix that later by manually collecting all my video embeds in a div or block element so that I can apply flex tools. Or maybe I won’t. I like huge videos myself.
I added a sentence prior to the videos to tell users to scroll past the videos to see lots of info, which was previously easier to find.
Screenshots of YouTube grid issue
Going from start to finish. The mobile view had tiny little play buttons that weren’t clickable. I should’ve known that a grid isn’t responsive, but I expected clips to still be clickable. Next we see the desktop version looks fine in a grid element. Third is the post-editor formatting area where you can change from grid to group (see those two overlapped rectanges?) Then, two screenshots show the desktop then mobile versions where videos span the entire width of the device screen.
On my website, I’ll likely leave the settings in place now. I am tempted to go further and manually add a div, so that I can create a flexbox situation. The group is less ideal than an actual div. With a div, I can set attributes like spacing.
Good luck with your YouTube embeds going forward, and keep in mind there may be multiple ways to solve the mobile reponsiveness issue shown here.
