SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

    Tim

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hi #Tim. Welcome to the forums.

    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

    Code:
    #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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m,

    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.
    http://screencast.com/t/dwhs8Kj9BAe

    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!

    Tim

    Edit: Guess I could have added the code here too.
    Original embed code
    Code CSS:
    <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
    Code CSS:
    <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>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <meta name="viewport" content="width=device-width">
    Those are just a few suggestions, and a bit of grist for the mill.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •