Use image URL to avoid uploading it. #sizeoptimisation

Design help General
1

Hi folks!

Is it possible to use the direct link of this GIFV image (Imgur - 18Mo) instead of uploading it to optimise (considerably) the speed of the loading?

Let me know!

Thanks :smile:

2

Edit: I tried with a Video widget. It works with GIFV files. BUT I can’t resize / style it. Any idea? FYI here is the read-only link : https://preview.webflow.com/preview/tribe-landing-page?preview=1fc4c946c018be857fd9aefc0ccc8ba8

3

As long as you’re using a HTML Code widget you can do anything. So declare your image with a code, or your video as an HTML5 video

4

Were is the gifv image? BTW and AFAIK, .gifv is only an MP4 file (.mp4 or .m4v) renamed into .gifv. It “works” because our modern browsers know how to recognize certain files even if they have a different extension.

5

OK I see that it is working once published, and that you used the video widget and just gave it the url of the gifv is that correct? I’m surprised, I would’nt even have tested this solution…

http://vincent.polenordstudio.fr/snap/mask.gif

6

Hey Vincent!

I did try it with a “Embed code” widget but it’s not working. The content doesn’t appear. That’s why I used a “Video” widget instead, because I knew that it was only a .mp4 file. The problem is it doesn’t really load faster (tested in Incognito mode on Chrome) and I can’t style it with a “Radius” or “Shadows” for instance, even if I put in a Div. The quality is perfect though.

You know what I mean? Thank you so much :slight_smile:

7
  • if it’s not loading faster, you then should try a real HTML5 video.generate all your files and add the code using code widget. It should load fast and display a propoer “poster” image in the meantinme. Keep the GIF version for mobiles though, as gifv or html5 video won’t autostart on mobile, nor play inline but fullscreen.
  • you never style an video. And not styling an image is good practice too. Rather, nest your video in a div, set the div to overflow hidden and style the div.
8

  • Alright, what would you advice to create a real HTML5 video that works seamlessly with Webflow? I tried Dropbox but sounds like it’s not working.

  • Perfect thanks :smile:

9

I have written a post here: Review of EasyHTML5Video generator app: it's very good! - Webflow Tips - Forum | Webflow

Dropbox works. When you get the sharing url for each file, replace www.dropbox.com by dl.dropboxusercontent.com.

10

Awesome, I am downloading the EasyHTML5Video app right now. Just one question, which one should I choose to just generate and copy-paste the code in the “Embed code” widget on Webflow?

756×200 24.9 KB

11

Careful with the app. Set it like this:

http://vincent.polenordstudio.fr/snap/yreh0.jpg

Also don’t copy all the code, just the part.

Are you using it for showing a vieo or are you using it for video background?

Read their documentation and experiment, because the app can give you a javascript control bar and other options. Depending on what you want, you make choices.

12

I am using it to replace GIF files. Load faster and better quality.

Alright thanks Vincent! that’s how I set it. But I have trouble generating the code. I chose the one without using JS because I don’t know what’s better with JS :smile:

1444×904 332 KB

I added it on webflow, check it :slight_smile: Almost there! Any idea how I could make the video take the full width/height of the div like the image at the right of the Hero header? https://preview.webflow.com/preview/tribe-landing-page?preview=1fc4c946c018be857fd9aefc0ccc8ba8

13

A good HTML5 video code is otfen a mix between properies added in Webflows’ UI and properties added within the code.

Try this code and play with min-width, width, min-height and height values:

<video autoplay loop style="min-width:100%; min-height:100%;" poster="https://dl.dropboxusercontent.com/....jpg">
  <source src="https://dl.dropboxusercontent.com/....m4v" type="video/mp4" />
  <source src="https://dl.dropboxusercontent.com/....webm" type="video/webm" />
  <source src="https://dl.dropboxusercontent.com/....ogv" type="video/ogg" />
  <source src="https://dl.dropboxusercontent.com/....mp4" />
  <img src="https://dl.dropboxusercontent.com/....jpg">
</video>
14

OK I get it. Nevertheless, it’s the same that at the beginning, I can’t change any properties like min-width, width, min-height and height values or even the radius of the “Div” that contains the “Embed code” widget :confused: I mean I can change it but non of the changes is visible.

So basically, I have the same issue as with GIFV. Is there a way to do what I want to do?

15

Just give a higher z-index to the container

http://vincent.polenordstudio.fr/snap/x2cqm.jpg

16

Thanks but unfortunately I still have the same issue: Can’t style the “Div” including the z-index. Sounds like it works for you but not for me…

I can only play with the width/height in the “Embed widget” code that I pasted but I can’t get rid of these margins.

1072×1302 501 KB

17

https://v.usetapes.com/BdGVTbvSE6

18

http://vincent.polenordstudio.fr/snap/nugmc.jpg

https://v.usetapes.com/FnY9wDDxVr

19

Amazing! THANK YOU SO MUCH VINCENT! Little LAST detail :smile: I still have this little margin at the bottom. Even with the min-height:100%! Any idea why?

20

You can give a height to the container:

http://vincent.polenordstudio.fr/snap/keo44.jpg