Please note: I do not want to change the way the video is embedded into the page. I do not want to use a different video hosting service. I know (and by know, I mean think) this can work by adding some CSS to my page. Thanks for you help.
Usually this is easy to fix, such as when you have a Youtube embedded video. You wet the width of the video to 100% or similar (along with some bottom padding) and the video scales nicely. You can also do this with the new <video> element, too.
This service you are using embeds the video with JavaScript, which is a bit of a fail right off the bat, because it means people without JS will get nothing. The embedded video also has width and height hard coded, another fail that makes it hard for you to reset. If viable, I would first be looking for another video service.
If that’s not an option, I would at least try to set a min-width on the #page div, such as
#page {min-width: 688px;}
There are other things that can be done to make the page fit full width on the mobile screen, but see what that does first.
The bit of code you supplied me really made the page look a lot better. The horizontal scroll bar appears and allows for just a small bit of scrolling but, definitely usable. I can’t tell you how many times I tried to apply min-width and max-width but never to #page. Thanks you for that!
I get what you said about the embed code and I knew that the software allows me to embed several different ways actually. SO, I decided to use a different embed style (same video settings) on another page and this made the code you gave me not work any more. The content of the page is fixed but the video is now a lot larger than the page. This is probably the best way for me to embed so I thought I would ask if you knew of a fix with the video embed with this new code?
Hm, they both appear the same on the iPhone for me. Anyhow, the first thing I’d try is to remove the left-right padding on #page and put it on something like #main. (That might help with the slight sideways scroll. Perhaps also adjust the min-width value on #page a bit.
You could also play with the width and height of the video a bit now. That embed code is still not particularly pretty, but I guess better than before.
The issue you describe for the second example (of only a tiny upper left corner of the page showing on the iPhone) can be helped by by putting something like this in the head of your document:
