Docs

[stuartchan]

Good day,

The portfolios on my site are videos.

On the Portfolios (Case Studies) page on my website, it is currently displaying the thumbnail of each video. There is the option to change it to media display. However, the media display adds a black bar stream display to the bottom of the video thumbnail.

Is there a way to change this to a Play Button icon in the middle of the screen? On the individual portfolio item page I was able to do this via Thumbnail Editor plugin.

Or, alternatively, if Theme.co cannot change this and isn’t comfortable recommending a 3rd party plugin who can, could you tell me the location of the code so that I may hard code it?

Cheers

[stuartchan]

This reply has been marked as private.

[Zeshan]

Hi Stuart,

Thanks for writing in!

Can you enable the “Media” display on one of the videos so we can take a closer look at it and provide you with a tailored response?

Thank you!

[stuartchan]

Sure thing.

I have enabled media on “Super Bock” and “Starbucks” to show you what the current display is.

[stuartchan]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.page-template-template-layout-portfolio .mejs-controls {
    border: none;
    background-color: transparent;
    box-shadow: none;
    background-image: none;
}
.page-template-template-layout-portfolio .mejs-time-total {
    display: none;
}
.page-template-template-layout-portfolio  .mejs-button.mejs-playpause-button.mejs-play {
    border: none;
}
.page-template-template-layout-portfolio  .mejs-controls {
    top: 40%;
}
.page-template-template-layout-portfolio  .mejs-video .mejs-controls {
 
    left: 113px;
    right: 50px;

}
.page-template-template-layout-portfolio  .mejs-button button:before {
    font-size: 29px;
border-radius: 100%;
    padding: 13px 26px;
background-color: rgba(255,255,255,0.5);
}

Hope it helps.

[stuartchan]

Good day,

This worked great. I readjusted some of the values so that the placement was better. One follow-up question. Is there a way to have default controls visible once I hit play and have my mouse hovered on the video? Upon right clicking, I can pick show controls, and enter into full screen mode.

Cheers!

[Rue Nel]

Hello There,

Regretfully the default controls when you right click and pick “show controls” is part of the video plugin with the browser. Only the play and pause buttons can be styled using css.

Hope this explains it.

[stuartchan]

Cheers

[Lely]

Do let us know if you still have questions.

Always,
X

[stuartchan]

Good day,

One more question, since we’re on the topic.

Is there a way to make the title space of each portfolio item uniform? Currently, my portfolio titles are varying different lengths, and it is affecting the look and display of the case studies page. Other portfolio items displayed below the top original row below are pushed out of alignment.

[Christian]

Please try adding the code below in your Appearance > Customize > Custom > CSS.

h2.entry-title.entry-title-portfolio {
    height: 50px
}

Thanks.

[Author]

Posts