Hi there! I am building out my portfolio and I have recorded videos in Loom and embedded them in my site because the quality is better. I would like them to loop automatically because when you replay them manually they are blurry for a bit in the beginning. All of the suggestions I have found online are solves for youtube videos and don’t seem to work for loom. If you could help me out I would very much appreciate it!
Here is my site Read-Only:
If it isn’t critical to host on loom you can download it as an mp4 and host on Webflow as a background vid which loops by default.
I really like using the background video function for short loops like this (under 1 minute).
I use this free editor that sizes/sets speed/compresses nicely. Online Video Resizer
Can see a sample how I’ve used here.
Thank you for that suggestion! I’m trying to do that now, but for some reason I am unable to see the background video in the fist thumbnail. Any idea what I’m doing wrong?
Hey Kelly,
You’re currently using display: flex on the container for the video with center alignment, which is basically squashing the video down to 0px in width, you need to change your background video div to display: block and give the background video element a z-index of 1 or more, that should solve it!
That worked thank you!!! Any idea how to scale down the background video? Seems like its getting cut off now.
Hey Kelly,
I know people have run into problems with this before in other posts here on the forum.
Another option for doing this would be to host your video externally and then use an html embed element with the following code to display your video instead:
video playsinline autoplay muted loop width="100%">
<source src="your video source link here" type="video/mp4">
</video>
In the mean time for testing, you can set your video to display: none, and use the webflow hosted source, which you can grab by clicking on the icon shown in the image below and copy/pasting the link:
Hope this helps!
