How do I add a regular MP4 video without having to mess with embed-responsiveness?

Design help General
1

This is the behavior that I want - have videos that play when you click them (or even autoplay)t:
https://material.io/design/motion/speed.html#controlling-speed

I’ve gotten as far as embedding my video via:

  1. The embed doesn’t respect the container it sits in, it is exceeding its borders and doesn’t resize at all in different form factors.

  2. I don’t want to use YouTube because if their UI on top of my video.

I honestly just want to play a video natively that respects the container size it sits in.

Why is this so hard? I would appreciate any kind of help,

Thank you!

1 Like
2

Try using Vimeo. There are more settings where you can customize the look.

Using the video component removes you from the complexity of trying to create responsive video containers, optimized videos based on device type, and video formats to work with different browsers.

Is it possible to just roll your own? Yes. Start with where is the video being served from, and look at that providers options for embedding.

3

I would also suggest that you review all the options using the YouTube component.

Other services can be used easily with the Video component, as well as HTML5 video via embeds.

4

I didn’t want to use Vimeo, because they don’t offer private videos (not without paying extra, already have a place to host).

Embedding a video from a hosting service comes with their own player UI. All I want is a video file in my site that is responsive.

Background video doesn’t reliably on mobile. I really might have to go with YouTube which I dont like.

1 Like
5

Maybe this tutorial will help you .

6

It’s been awhile since @blazin00 asked the question but for me it’s still relevant. Is it possible to somehow upload and use or just use mp4 to display and autoplay on webflow? I’ve tried embed vimeo and youtube but they don’t work as I would like to - natively. My goals for video usage are:

  • I don’t want to display video controls
  • I want video to autoplay

Example of videos: Other - Lukas Halota

This is a must feature for anyone that wants to display dynamic portfolio.

1 Like
7

I was just looking into how to natively add video into webflow and low and behold I found this topic.

It would be nice if it was a feature, without having to mess about with 3rd party video hosting sites or trying to squeeze the life out of GIFs.

4 Likes
9

I agree with OP and am a bit disappointed over how difficult it is to get a plain, autoplaying video embedded. I tried the autoplay=1&muted=1&background=1&loop=1 parameters to player.vimeo.com but they didn’t work. Configuring this on Vimeo requires a paid account at 6€/month which just doesn’t make any sense for hosting one video.

YouTube seems to force the 16:9 aspect ratio which renders it useless in this case.

Am I missing something? I hope so. Please tell me.

10

This is my solution for now:

Embed:

<video id="video" width="452" height="804" autoplay muted loop playsinline>
  <source src="https://somewhere.com/videos/foo.mov" type="video/quicktime">
  <source src="https://somewhere.com/videos/foo.webm" type="video/webm">
</video>

Custom Code → Head Code

<script type="text/javascript">
  function resizeVideoPlayer() {
    const fullVideoWidth = 452
    const fullVideoHeight = 804
    const padding = 20

    const video = document.getElementById('video') 
    const windowWidth = window.innerWidth
    if (windowWidth < fullVideoWidth - padding) {
      const width = windowWidth - padding
      const aspectRatio = fullVideoWidth / fullVideoHeight
      video.setAttribute('width', width)
      video.setAttribute('height', width / aspectRatio)
    } else {
      video.setAttribute('width', fullVideoWidth)
      video.setAttribute('height', fullVideoHeight)
    }
  }
  window.addEventListener('DOMContentLoaded', () => { resizeVideoPlayer() })
  window.addEventListener('resize', () => { resizeVideoPlayer() })
</script>

In this case it’s a portrait-orientation video that spans the full width on small screens.

11

@gubikmic Thank you for the code. Have you found a way to make this work with a collection list? Is there a way to have a collection list with a video link to an mp4 file that will play in Webflow?

12

@rmjjkj I think you should be able to use the ‘Add Field’ parameter to solve this (see Video Link CMS field not working when submitted through another form via Zapier - #6 by Gail_Ranger)

13

Hi @gubikmic , thanks for the code!

Does this work with YouTube videos as well?

Trying to replace our GIFs with videos here: https://looppanel.com/