Best way to have an autoplay video on a page?

Design help General
1

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:

2

@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.

3

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
4

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

5

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

Mobile should work. Try her:

6

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