[sasquach007Participant]

Hi,

I’m using the Media Maestro S3 Video player on my site, but I only have the play button and time for controls and should have the options to enlarge the view to full screen on the right side of the player. I contacted Media Maestro and they said my theme was implementing CSS for the video player that was preventing the player options to display.

Here is an example video
http://www.thepatienttrader.com/863-2/

How do I get X to allow my video player to display the way it should? They sent me a style.css file that was suppose to fix the problem. I put it in my child theme folder, but it had no affect? Any idea what I can do here to fix this?

Attached is the style.css file they sent me a a screen shot of how the player should look.

Here is what they wrote back to me:
After reviewing your site, it appears that your theme is actually implementing CSS for the video player which is conflicting with the CSS we provide for the video player. I’ve grabbed the style sheet from your site and modified it, removing the conflicting elements. Can you upload the style sheet back into your theme’s folder? The best thing to do is rename the original style sheet to style.css.old and then insert the new one

[sasquach007Participant]

I have some additional info. See the attached file. The support person from the Video Player provider provided a screen shot of were the theme is interfering with the video player controls. Also. If you look at the page http://www.thepatienttrader.com/863-2/ you will see that the volume and full screen controls are there, but are below the player instead of on the player itself.

Can you provide a fix that will correct this and future Video posts to X? The video support person said The best way to resolve is to comment out the conflicting elements from your Theme’s CSS. I’m not sure how to do that please advise.

Thanks,
-Tom

[RupokMember]

Hi Tom,

Thanks for writing in! It seems they already provided you some solution. You should not edit/replace the theme’s style.css as it will be wiped after theme update. In that case ask them to provide the CSS fix separately so that you could add the CSS as Custom CSS under Custom > CSS in the Customizer.

Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[sasquach007Participant]

They are telling me that the theme is what is the problem not the video player. I don’t have a fix from them. They just pointed out lines of code to comment out. I’m not technical and need some help here.

Since this is a css issue, and X is the cause of the problem you should be able to look at it. I just need to get the Volume and Fullscreen icons to show on the player. They are being pushed below the player by the themes CSS. Please help.

here is the page http://www.thepatienttrader.com/863-2/

[sasquach007Participant]

Screenshot shows what I’m trying to accomplish with a css change

[sasquach007Participant]

In the Knowledge base I found this: https://community.theme.co/forums/topic/controls-from-self-hosted-video-out-of-place/

Would this fix my problem? I could not find these file locations to fix the CSS. Can you let me know where I can now find the files mentioned in this KB and if this will fix my issue. Really frustrated with what should be simple functionality here.

[RupokMember]

Hi there,

Thanks for writing back. This thread also refers this solution (commenting CSS) – https://community.theme.co/forums/topic/controls-from-self-hosted-video-out-of-place/#post-208617

(Previous replies are obsolete since there is no X Shortcodes plugin now).

I think you can try the solution provided by the plugin support. Just replace the style.css to fix the issue for now.

The below code should be commented :

/*.mejs-container:focus,
.mejs-container:active {
    outline: 0
}
.mejs-container.mejs-container-fullscreen {
    background-color: #000
}
.mejs-controls {
    height: 32px !important;
    border: 1px solid transparent
}
.mejs-controls>div {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    line-height: 28px
}
.mejs-video .mejs-controls {
    width: auto;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px
}
.mejs-button button {
    margin: 0;
    border: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: inherit;
    text-align: center;
    background: none
}
.mejs-button button:focus,
.mejs-button button:active {
    outline: 0
}
.mejs-button button:before {
    content: "\f065";
    display: block;
    margin: 0 auto;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.mejs-button.mejs-play button:before {
    content: "\f04b"
}
.mejs-button.mejs-pause button:before {
    content: "\f04c"
}
.mejs-button.mejs-mute button:before {
    content: "\f028"
}
.mejs-button.mejs-unmute button:before {
    content: "\f026"
}
.mejs-button.mejs-fullscreen button:before {
    content: "\f065"
}
.mejs-button.mejs-unfullscreen button:before {
    content: "\f066"
}
.mejs-time {
    width: 45px !important;
    font-size: 10px;
    text-align: center
}
@media (max-width: 767px) {
    .mejs-time {
        display: none
    }
}
.mejs-time-rail {
    width: calc(100% - 30px) !important;
    padding: 10px 10px 0
}
.mejs-time-total {
    display: block;
    margin: 0;
    position: relative;
    width: 100% !important;
    cursor: pointer
}
.mejs-time-total:focus,
.mejs-time-total:active {
    outline: 0
}
.mejs-time-loaded,
.mejs-time-current {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}
.mejs-time-loaded {
    width: 100% !important
}
.advanced-controls .mejs-time-rail {
    padding-left: 0;
    padding-right: 0
}
@media (max-width: 767px) {
    .advanced-controls .mejs-time-rail {
        padding-left: 10px;
        padding-right: 10px
    }
}
.advanced-controls.mejs-audio .mejs-time-rail {
    width: calc(100% - 150px) !important
}
@media (max-width: 767px) {
    .advanced-controls.mejs-audio .mejs-time-rail {
        width: calc(100% - 60px) !important
    }
}
.advanced-controls.mejs-video .mejs-time-rail {
    width: calc(100% - 180px) !important
}
@media (max-width: 767px) {
    .advanced-controls.mejs-video .mejs-time-rail {
        width: calc(100% - 90px) !important
    }
}
.mejs-audio .mejs-layers {
    display: none
}
.mejs-video .mejs-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.mejs-video .mejs-poster {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%
}
.mejs-video .mejs-overlay-play {
    cursor: pointer
}
.mejs-video .mejs-overlay-loading,
.mejs-video .mejs-overlay-error,
.mejs-video .mejs-overlay-play .mejs-overlay-button {
    display: none
}
.bg .mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}
.mejs-offscreen,
.mejs-time-buffering,
.mejs-time-handle,
.mejs-time-float,
.mejs-volume-slider,
.mejs-clear {
    display: none !important
}
.hide-controls .mejs-video .mejs-controls,
.vimeo .mejs-video .mejs-controls {
    display: none !important
}
.hide-controls.autoplay .mejs-video .mejs-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.me-cannotplay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.me-plugin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.mejs-controls {
    background-color: rgba(0, 0, 0, 0.5)
}
.mejs-button.mejs-playpause-button {
    border-right: 1px solid rgba(255, 255, 255, 0.125)
}
.mejs-button.mejs-volume-button,
.mejs-button.mejs-fullscreen-button {
    border-left: 1px solid rgba(255, 255, 255, 0.125)
}
.mejs-button button {
    color: rgba(255, 255, 255, 0.5);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease
}
.mejs-button button:hover {
    color: #fff
}
.mejs-time {
    color: rgba(255, 255, 255, 0.5)
}
.mejs-time-total {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2)
}
.mejs-time-loaded {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3)
}
.mejs-time-current {
    height: 10px;
    background-color: #fff
}*/

Note that the CSS is required for the video player element used on the theme so we can’t give any solution that breaks our theme style. If yous till need to work with the third party plugin then just use the provided CSS file.

Hope this makes sense.

Cheers!

[sasquach007Participant]

I only see the following in my style.css file. I’m looking here: /home4/thepati7/public_html/wp-content/themes/x/style.css
is there a file elsewhere I should edit?

Also- Should I do this on the child theme only? Thanks!
/*

Theme Name: X
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: An immensely powerful and endlessly customizable WordPress theme.
Version: 4.3.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: __x__

*/

[RupokMember]

Hi there,

Thanks for writing back. Yes you need to replace the /x/style.css file. Note that it’s not recommended as it will be wiped if update your theme. But there is no other way to do this using Child Theme unless you override the CSS that I posted on last reply.

So if you update you theme later, you need to comment out the CSS again. Just keep that in mind.

Cheers!

[sasquach007Participant]

There is no code in the file like I said. So I don’t have anything to comment out. The code below is all that is in the file.

/*

Theme Name: X
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: An immensely powerful and endlessly customizable WordPress theme.
Version: 4.3.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: __x__

*/

[sasquach007Participant]

Where can I find the style.css file you are talking about, so I can edit out these lines of code?

[sasquach007Participant]

I found what looks to be the style file for renew in public_html/wp-content/themes/x/framework/css/site/stacks the file is renew.css. Is this the file I want to edit?

Also. I have a child theme, so should I put this under the child theme once edited so it doesn’t get overwritten? If so what directory does it need to be in. I don’t have the css/site/stacks path in the framework directory of my child theme.

[NicoModerator]

Hi There,

You can check the link below on how to use child theme customization.

https://community.theme.co/kb/customization-best-practices/

Hope it helps.

Let us know how it goes.

Thanks.

[sasquach007Participant]

1.) You didn’t answer my question. Is this file public_html/wp-content/themes/x/framework/css/site/stacks/renew.css the style.css file for the RENEW stack of the x theme? I’m not a technical person, but if this is the file then I can edit it and make the changes.

2.) I don’t see anything in that link you sent me about the where the renew.css file would be placed in the child theme. Can you please be specific as to where I would put the renew.css file in the child theme once I make the edits.

[ChristianModerator]

Hey there,

1. Yes, that is the Renew styles.

2. Yes, there is no instruction for it. The Customization Best Practices article is for modifying templates files. For CSS customization, you should override X styles by putting your CSS in Appearance > Customize > Custom > Global CSS. Editing the Stack Style directly is not recommended because it will be overriden if you update X. You will need to use developer tools to quickly know what CSS class you should override. To learn how to use a developer tool fast, please see https://www.youtube.com/watch?v=Z3HGJsNLQ1E

Thanks.

[Author]

Posts