Docs

[invidigiart]

I am displaying a slider above my header. The slider has a transparent background so that I can take advantage of the video background image option available when editing pages in Cornerstone. However, there is a black screen that appears before the video loads. Sometimes when the video loads it is choppy. I’m thinking the way to avoid this would be to pre-load the video but I’m not sure how to do this.

Do you have an recommendations for getting the video to start right when the site opens. I have taken the site out of maintenance mode so that you can see and report back your findings.

http://www.yourhealthmattersllc.com/

[Rupok]

Hi there,

Thanks for writing in! Unfortunately I can’t suggest anything to preload the video as it won’t be possible but you can use poster image. It will be displayed before the video loads.

Cheers!

[invidigiart]

Where do you put the “poster image”?

[Rue Nel]

Hello There,

To add a video poster image for mobile, please edit your page and find the slider settings. It is just right below the field you have assign the slider (http://prntscr.com/bjtuv1). And if you have assigned it in Cornerston, simply go to Settings > Slider Settings (http://prntscr.com/bjtvcx).

Hope this helps.

[invidigiart]

Is there anything to do for desktop? I’m not really concerned about mobile view.

[Rue Nel]

Hello There,

While loading the video or when the video is not loading, you can set a default background image for the said section area. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .x-slider-container.above.bg-video {
    background-image: url(http://www.yourhealthmattersllc.com/wp-content/uploads/2016/05/fruit.jpg);
    background-size: cover;
  }
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts