Embedded video causing mobile page layout problem

Hey guys,

The problem I have having is that when I embed video into my Wordpress page it messes up the page when viewed in a iPhone browser.

I suspect you would be able to replicate this issue if you have an iPod touch.

Here is a video explaining the issue in more detail - http://screencast.com/t/4kfV4oaav

Here are links to the pages shown in the video:
http://easyappspro.com/offer/testing/ (Wordpress page I am having the issue with on a mobile browser)
http://vidhost.evsuite.com/testing/ (Same video embed code and having no mobile issues)

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.


Hi #Tim. Welcome to the forums. :slight_smile:

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. :slight_smile:


Thanks! Glad to be here.

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?

Here is a screenshot with your fix and one with the new embed code.

Here are the pages shown in the screen shots:
http://easyappspro.com/offer/testing/ (original page with your fix)
http://easyappspro.com/offer/testing-embed2/ (page with new embed code)

Both pages appear the same in Chrome, just not on my iPhone browser.

Thanks again for you help with this!


Edit: Guess I could have added the code here too.
Original embed code

<script type="text/javascript" src="http://vidhost.evsuite.com/player/SW50cm8ubXA0/?container=evp-9LBGWKM16B"></script><div id="evp-9LBGWKM16B" data-role="evp-video" data-evp-id="SW50cm8ubXA0"></div>

New Embed code

<div itemscope itemtype="http://schema.org/VideoObject"><meta itemprop="name" content="" /><meta itemprop="description" content="" /><meta itemprop="width" content="640" /><meta itemprop="height" content="360" /><meta itemprop="thumbnailUrl" content="http://evs-hosted-150fa82151656d.s3.amazonaws.com/Intro-thumbnail-0.jpg" /><meta itemprop="embedUrl" content="http://evs-hosted-150fa82151656d.s3.amazonaws.com/admin/player/assets/jwplayer-5.10/player.swf?file=http%3A%2F%2Fevs-hosted-150fa82151656d.s3.amazonaws.com%2FIntro.mp4%3FAWSAccessKeyId%3DAKIAJSVDPJLWCBMGWBYQ%26Expires%3D1676848531%26Signature%3D1lJEQv%252B4Rl1o25Y%252FXKbrIvVAn3U%253D&autostart=1&stretching=fill&playlist.position=none&controlbar.position=over&abouttext=EasyVideoSuite&aboutlink=http%3A%2F%2Ffreeoffer9.webactix.hop.clickbank.net%2F&skin=http%3A%2F%2Fvidhost.evsuite.com%2Fplayer%2Fassets%2Fjwplayer-5.10%2Fskins%2Fnewtubedark%2Fnewtubedark.xml" /><script type="text/javascript" src="http://vidhost.evsuite.com/player/SW50cm8ubXA0/?container=evp-9LBGWKM16B"></script><div id="evp-9LBGWKM16B" data-role="evp-video" data-evp-id="SW50cm8ubXA0"></div></div>

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:

<meta name="viewport" content="width=device-width">

Those are just a few suggestions, and a bit of grist for the mill. :slight_smile: