Take over skin when using media module's remote stream wrappers

If you are testing with Vimeo, then I am afraid this is an issue with Vimeo not allowing other players to remove the controls from their player. I hope they fix this soon since it is a cause of frustration on my end where you see the double controls on the player. One thing I may try is to just place a black background on top of that so that people are not confused for the vimeo videos, which I may add in a future release. Let me know your thoughts on that.

Thanks,

Travis.

Hi Travis,

First, totally appreciative of all your work on MediaFront.

I think any hack documented for now for non-Vimeo Plus folks (like myself) is helpful.
Amatuer question, how would you add a black background over the player controls? CSS in the MediaFront theme?

Please advise.

This should work to remove the controls and leave you with Vimeo controls (untested except for Vimeo + in Chrome).

.osmplayer-default .ui-widget-header {
  display: none !IMPORTANT;
}

!IMPORTANT was required because mouse hover will set display: block on the controls.

Unfortunately it will apply to all videos, so if you have other backends which you want the controls for, you'll need to handle the difference somehow. Hence #1704588: Add classes to denote media backend used for embed - spinning off a separate issue for more detailed CSS classes so we can apply this only as required.

G'Day all,
We are keen Vimeo users, have a Plus account, and we're having the problem of the duplicated controls. #4 sounds promising, but we can't afford to cut the controls out of videos that are played directly on Vimeo, which I understand is the penalty of using that strategy.
This puts up a serious UI blocker for the whole module (for us).
Is it possible to resolve this somehow by inserting a "toggle controls on/off" that would affect the OSM player and thus allow Vimeo to come through? I would prefer to have OSM controls but obviously if Vimeo are not opening up their player code then there's no way forward there, eh?
Any recent thoughts on this issue?
Kind regards,
JB

Here is my work around to #6 which will enable you to disable the OSM player contols and have only the vimeo controls and it affects only the Block or the page your video will be show in

My Solution.

Step 1: install the css injector module from https://drupal.org/project/css_injector

Step 3: Setup your views according , create a view display as block or page and configure it to view your video from vimeo. (Dont worry if the two controls are still showing)

a. go to www.mywebsite.com/admin/config/development/css-injector/add

Title => My vimeo control
css code =>

.hide-osm-control .osmplayer-default .ui-widget-header {
display: none !IMPORTANT;
}

b. Leave all other option the same and save.

Step 5: In the Views advanced settings , under "CSS class" , add "hide-osm-control" and save

You can remove the Vimeo control bar by doing the following:

- Sign up for a Vimeo Plus account
- Go to your Vimeo account and go to the 'Embed' settings for your chosen video
- Scroll down to under the video preview to player preferences and uncheck the 'Show Play Bar' option

No hacks required but a $9.95 per month subscription :)

I think #2 is the best solution. I hate to have the MediaFront player confusing to any user, whether or not a paid Vimeo Plus account is being used. I love MediaFront as a video solution and I hate to see it not optimized under any circumstance.

@gr8britton - I would have added that to the CSS of the current theme.

Sorry @gr8britton, it's been some years since I looked at this and I don't have access to the site it was on any longer. From what you're saying it sounds like a CSS debugging issue more than a module issue though.

Perhaps Vimeo or this module changed the classes so you need to modify the selector which worked for me back then? You're just trying to disappear one of the sets of controls ...

Remove Vimeo controls for browsers for desktop computers:
1.(If you didn't do so already) Add a custom stylesheet file to your theme as described here . Make sure your css file is added at the end - just before print.css
2. Make a note of the name of the Mediafront preset you created and saved. For the sake of the argument, let's say presetname
3. Open your custom css file and add this at the very end of it

@media only screen and (min-width:1025px)
{
.media-player .media-player-display
{
overflow:hidden;
}
#mediafront_presetname-player .vimeo-player
{
margin-top: -75%;
height: 300%;
}
}

4. Turn off css aggregation
5. Flush the cache
6. Turn css aggregation back on