Background video - load image

[alex_smilansky]

Hello,

I have a background video on my site. See here.

I’ve tried to set the loading image in the embed code but it doesn’t show up.

Does anyone know how to resolve this?

Thanks,

Shim

---

Here is my public share link: https://preview.webflow.com/preview/mayku?preview=17e65ee286e1b6c4efbd402dd9dc2334
(how to access public share link)

[vincent (Vincent Bidaux)]

Hi you need to declare the image as a Poster like in the code below. Also you need to declare an .ogg version of the video, for compatibility with all browsers.

<video autoplay loop style="width:100% ; height: auto; min-width:100%; min-height:100%; object-fit: cover; preload=auto; position:absolute; z-index: -1; " poster="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg" >
  <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type="video/mp4" />
  <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
</video>

Scroll to the right, the part you want is in the first line.

    <video autoplay loop style="width:100% ; height: auto; min-width:100%; min-height:100%; 
object-fit: cover; preload=auto; position:absolute; z-index: -1; "
 poster="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg" >
      <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type="video/mp4" />
      <source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
    </video>

[vincent (Vincent Bidaux)]

The code you have currently will display the png image when the mp4 video isn’t supported. So on Mozilla and Opera. Even if you add the .ogg version it’s good to keep the img line, in case of.