Placeholder image until Video banner has loaded

[Jell92]

Hello,

I have a video in my banner on my website Tryllekunstner-booking.
But how do I set a placeholder image, that shows until the video has loaded?

Thanks!
Anders

[christian]

Hey Anders,

This is not a feature offered in X out of the box so it would need custom CSS. You need to apply an image background to the x-bg element which houses the background video. The code should be like below(replace the image URL with your own): Place the code in Global CSS if you want to use this site-wide. For page per page basis, insert in Cornerstone’s Page CSS.

.x-bg {
  background: url(http://x.dev/wp-content/uploads/2017/11/featured-case-study-01.jpg) no-repeat;
  background-size: cover;
}

Watch the code in action here.

Please note that this uses custom code and we have no support for the maintenance of this. The purpose of the code I’ve given is to only guide you of the possibility when using CSS. If this does not work on your end now or in the future, you’ll need to seek help from a third party developer.

Thank you for understanding and hope that helps.