[Tutorial] How to add a Custom HTML5 Background Video

Community resources Webflow Tips
2

Method #2: HTML5 video embed.

@thesergie’s example uses a jQuery plugin, which likely offers better support for older browsers. However, if you are targeting more modern browsers, you can reduce much of the above code into a single video tag.

The following example should work in IE9+ and the latest versions of Chrome, FF, Safari.

Example:

http://videotag.webflow.com/

Webflow designer link here.

Directions:

  1. Drag an Embed widget into your webflow page.

  2. Paste this code into the embed:

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <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" />
  <img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">
</video>

  1. Then replace the video paths with urls to your own files.

  2. Select the element that you are placing the video inside (e.g. the Section div), give it a class, and style it using the Advanced position menu, to the following settings:

Position: Relative
Overflow: Hidden

Remember, your mileage may vary… that is until we build this natively into webflow :wink:
-Dan

17 Likes