SHOW background video - sizing issue on mobile/tablet

Discussion in 'SHOW Responsive Video Suite' started by Niall lucas, Mar 27, 2017.

  1. Niall lucas

    Niall lucas Member

    6
    0
    Hi,

    I'm using a fullscreen background video on the homepage of my site. It works fine, and does play on both mobiles and tablets, but oddly around 70% of the time the video sizes to fit the screen width, and not fill as it should (screenshots attached of how it should look vs. how it does). Often a few refreshes will fix it, but as it's the homepage I'd like a bit more consistency knowing users will come to it first etc.

    Any help on what could be causing the issue would be appreciated!

    Correct layout.png Incorrect layout.png
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Niall, thanks for posting. Could you show a bit more info (maybe screen shots) of your setting and layout?
    Thanks
    Dj
     
  3. Niall lucas

    Niall lucas Member

    6
    0
    Hi,

    I've attached a screenshot of how the page is laid out in Muse (I took one at the max breakpoint of 1600px and another at a typical mobile size I'm using, 430px).

    To sum up the layout of the page:

    • My header is on a master page, on a layer above everything else, and applied to this page.
    • I have the SHOW background video widget set to play a local video with both .webm and .mp4 versions, as well as a placeholder.
    • I then have a frame set to full browser width and filled with a transparent line pattern acting as an overlay (this was a workaround to having the pattern baked into the video as the compression muddied it). This frame is also set to display full height using custom code placed into the header HTML.
    • Finally, I have the text and state button placed over everything else on the page.
    I've tried removing the pattern overlay as I thought the custom HTML might be causing an issue, but it didn't solve it, and I've also tried removing the SHOW widget from the page and re-inserting it, again with no success. Though I haven't tested it thoroughly, my guess is that it's portrait based screens on which the problem occurs, as the widget seems to misread the screen size and display the video to fill width, rather than height as intended.

    Website layout.jpg
     
  4. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Niall, thank you for the information, you've answered just about everything I was going to ask you to try.
    I'm going to have to suggest a support ticket (resources>contact us), the team can check the file issue that I can't (without your file, and they are set up to receive it).
    The only thing that does give me a bit of concern is the amount of Break points your site has. Just my opinion, but that's quite a lot.
    Dj
     
  5. Niall lucas

    Niall lucas Member

    6
    0
    Thanks for your help, I will open a support ticket and see if I can get some advice there.

    The amount of breakpoints mostly stems from this site being my first 'major' Muse project - as I've progressed through it and discovered better ways of working with the program the amount has reduced page by page. I am in the process of re-visiting pages, cutting everything down and simplifying, but am looking to launch soon and continue work on it once its live.
     
  6. EyesChone

    EyesChone New Member

    4
    0
    I think you can change the aspect ratio of the home page;)
     

Share This Page