Streaming live at 10am (PST)

Background video - load image


#1

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)


#2

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>

#3

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.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.