• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

Video player width on mobile

[Solved]

Foliovision › Forums › FV Player › Troubleshooting › Video player width on mobile

  • Aaron S. 7 years, 9 months ago

    Hi, I am having trouble with the foliovision flowplayer plugin on mobile.

    Here is a test page where you can see what is going on:

    https://ballstrikingblueprint.com/members/home/fv-player-test/

    If you look at the page source you will see that the width of the <div>’s that contain my player are 300px. I believe it originates with:

    <div id=”le_body_row_2_col_1″ class=”one-column column cols”>

    …followed by a few <div>’s that fill 100% width.

    However then when we get down to the player:

    <div id=”wpfp_b5ec056f04941441950fb45bdc32328f”…..

    You will see it now has a width of 375px coded into it. If you play the video you will see that it is clipped and only showing the lower left corner of the video.

    I have tried playing with the foliovision “Mobile Settings -> Force fullscreen on mobile (beta):” which seems to improve (or at least change) the behavior. When that box is checked the video will play in fullscreen and properly display the full width of the video. However, if I then hit any of the quality buttons at the bottom, the player reverts to it’s original clipped version showing just the bottom left portion of the video (and not in full screen).

    Also, I am not sure which quality version the video is defaulting too when this force fullscreen on mobile option is checked.

    Is there a solution for this? I’d really like the video to play properly on mobile!

    Thank you in advance,

    Aaron

    P.S. attached images are:
    1) with the force fullscreen option unchecked
    2) with the force fullscreen option checked and playing in full screen
    3) with the force fullscreen option checked AFTER I have changed the quality selection

    force-fullscreen-2nd-play-after-quality-switch
    Force-fullscreen-2nd-play-after-quality-switch
    force-fullscreen-1st-play
    Force-fullscreen-1st-play
    no-force-fullscreen
    No-Force-fullscreen
Viewing 4 replies - 1 through 4 (of 4 total)
  • Martin 8 years ago

    Hello Aaron,

    could you please post what exact shortcode you are using? The thing is there is <div class=”fp-playlist-vertical-wrapper”></div> around you player and it shouldn’t be there. Without it it should appear much better.

    Or have you set the default playlist style to vertical in Settings -> FV Player Pro?

    Mobile devices pick the default quality. This could be improved so that there would be a checkbox in FV Player quality settings to assign the default quality for mobile – pressumably you would pick the lowest one to make sure mobile users get the video playing as quickly as possible.

    Thanks,
    Martin

    Aaron S. 8 years ago

    Hi Martin, thank you for the reply!

    The shortcode I am using on that page is:

    [fvplayer src="https://d3qwurpo1o31ui.cloudfront.net/Lessons_Intro-360p.mp4" src1="https://d3qwurpo1o31ui.cloudfront.net/Lessons_Intro-360p.webm" qsel="true"]

    I DID have the default playlist style set to vertical in the Settings, however I tested a few variations and it seems to be behaving the same way. (I now have the default playlist style set to Prev/Next so you can see).

    Martin 8 years ago

    Hello Aaron,

    I see why this is happening now – FV Player has a safety function in it which makes sure that the player is visible if it’s inserted into some weird responsive theme. You can see that the div class=”flowplayer” element has some inline width and height on it – that’s it. The max-width and max-height is normal – to make it responsive.

    So when the width and height is removed from inline styles, the player won’t appear at all.

    I found that it’s the optimizePress theme – in your https://ballstrikingblueprint.com/members/wp-content/themes/optimizePressTheme/lib/assets/default.min.css there is

    .flowplayer .fp-context-menu, .flowplayer .fp-ratio, .flowplayer.hide-controls .fp-ui * {
        display: none;
    }

    Could you please try to add a rule like this to your theme custom CSS?

    #content_area .flowplayer .fp-ratio { display: block; }
    

    Then it should start to apppear properly.

    I’m not sure why OptimizePress handling of Flowplayer (which is a core of FV Player) is so strange. Do you have any special video settings in it enabled?

    Thanks,
    Martin

    Aaron S. 8 years ago

    Martin, that looks to have done the trick :)

    Thank you for your help!

    Aaron

Viewing 4 replies - 1 through 4 (of 4 total)
Reply To: Video player width on mobile



Please Sign in or Register to upload files.

Related Posts

  1. The native fullscreen is very simple but a bit faster

    FV Player’s New Features: Mobile Settings and Better Playlist Subtitles

  2. WordPress video player support for Blackberry 10 OS

  3. Mobile Force Fullscreen

Primary Sidebar

Sign in Register
FV Player Docs Post New Topic

Welcome

to Foliovision support forums! We'll be happy to provide free support to resolve all the reported bugs. You always can start by specifying your OS and browser and steps to reproduce the bug.

If you need help with the installation on your site, please submit a request for a Pro Support Incident. We'll have you up and running in no time, with detailed instructions on how to resolve your issue yourself in the future.

Facing a hard to solve WordPress problem? On a tight deadline?

Let us take care of it for you
right now.

Pro Support Buy FV Player

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!