Streaming live at 10am (PST)

Best way to have an autoplay video on a page?

Hey all!

What’s the best way to make a video auto-play on the page in a loop like so?

I don’t want to use youtube or any embeddable type solution, but simply an auto-play video on the page that’s really low file size. But an animated gif would be huge and not render very well.

Thanks for any guidance anyone can give! :smiley:

@adiggy - The HTML5 specification addresses the best way to deliver video. You should read this page at MDN.

Then decide how you will encode the files, host them, and create a responsive container to display the video within.

Or … use a video delivery solution like; webflow embed (embedly) youtube, or vimeo.

Ah, that HTML5 spec is exactly what I needed. I got it working great (although not on mobile, unfortunately). I was assuming there was some way to do this with the native webflow widget. Thanks so much!

For anyone else looking to accomplish this, here’s the embed code I used to autoplay without any player controls and on loop:

<video width="100%"  poster="placeholder.jpg"  autoplay loop muted>
  <source src="VIDEO_LINK_HERE.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="VIDEO_LINK_HERE.mp4">link to the video</a> instead.</p>
</video>
1 Like

Don’t forget that different media formats need to be used to work with different browsers and devices.

This is the official chrome article about “blocking autoplay video with sound” (Since chrome 64)

Mobile should work. Try her:

Ah yes, thanks for the reminder @webdev! Do you think that webm and mp4 would cover the vast majority of my bases?