-
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
-
-
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
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).
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
Martin, that looks to have done the trick :)
Thank you for your help!
Aaron
