Streaming live at 10am (PST)

Youtube widget lacking functionality loop and ratios

Hello webflow community and team,

This is my first post here and I have come to you because I have a problem. I’ve been building a site to host some of my aftereffects and cinema 4D work. I use Youtube and wanted to host the videos on there but link them to this site via the widget. My aim for the gallery section was to create a grid that would maintain the proper rations i.e. 1:1 and 16:9. As a secondary objective I would love it if the youtube videos would also loop, i’ve watched some tutorials but have since not been able to make it work.

I’d really appreciate any help you guys could offer, I love webflow and think it is a fantastic tool. I am aware of elfsight but was wondering if I could achieve this goal for no cost.

Cheers,

Paul


Here is my site Read-Only: https://preview.webflow.com/preview/paul-mograph?utm_medium=preview_link&utm_source=designer&utm_content=paul-mograph&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

Paul, Welcome to the forum.
spent some time on this and found some useful stuff.
maybe not to you though.
Couple of things, for looping if the video is very small try video background, you upload it to webflow.
the other option I finally found to work is replace video with embed.
put this inside the embed

if this is useful please tick the heart and even solution if your happy.

1 Like

Hello thanks for the warm welcome!

I did check to see how much it would cost to upgrade my sites package I believe the $12 a month for an annual contract is the cheapest. Since I am currently unemployed and looking for work this is not really an option I can take for one feature. But I guess I could try a months worth of subscription and try your solution.

One thing I would like to know is there any plans from the webflow team to expand on their current Youtube widget? Looping a video seems like a basic feature. Responsive aspect ratios would be fantastic for the Grid. I’ve been watching tutorials and nothing seems straight forward.

Cheers,

Paul

Your welcome,
So if you drag the background video widget to your page, it should then ask you for a file to upload?
Is this not a free basic option?

I have the option for embed youtube video which is perfect for you but thats a paid plan also.
I dont know if they are going to improve it but there is a big update immanent like this month.

I am unemployed as well and learning web design as I like being creative instead of what my old job was.

1 Like

Hello again,

I tried the background video option and that was the only way I could get a suitable loop. However still unable to keep a successful 1:1 ratio whilst keeping it responsive. It honestly should not be this lengthy to do. I do not want to upload many videos to the site so I can keep the site loading quickly. I’ve decided to make all my gallery entries 16:9. It will look lest interesting but I would rather have my content scailing correctly.

Many thanks for your help iDATUS, wishing you all the best on the employment hunt. I am right there with you!

Best,

Paul :slight_smile:

Thank you.
Yes background video doesn’t scale properly at all.
Spent 2-3 hours on someone else’s project and failed.
Pictures do resize for example.
My guess is its a very old widget in need of some love.
Webflow is not widget based and tries to give you tools to create your own work and allows third party connections for greater flexibility of no code.

on a side note from one designer to another and its my perspective.
Your logo animation is great but for me flows wrong.
Its the arrow heads, they flow backwords.
Consider flowing from the opposite so it looks like arrows flying in. Resting place stays the same.
What’s your thoughts?

Hey man,

I see what you are saying and you made a good point. I’ve just updated the site with the changes for 16:9 and the video. I’m testing it on different devices currently.

https://preview.webflow.com/preview/paul-mograph?utm_medium=preview_link&utm_source=designer&utm_content=paul-mograph&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

Hope you like the changes,

Paul

feels a lot more fluid now.
As to the logo it doesnt quite work for me and took a while to put my finger on it.
the top right arrow, bottom right angle doesnt follow the lines of all the other objects.
its currently / but i think it should be
inline with the top right of the arrow.
If that makes sense.

Also if your looking for a buddy up let me know by pm

Paul your logo link at the bottom of the page doesn’t work, need to set the go to section id.
Just admiring your design and testing it. Free of charge :wink:

Also I was working on this post who was using background video and again the video aspect ratio didnt work.


myonke - Michael Yonke
came up with this brilliant solution.
I’ve run into this issue before. What I do is create the main div, set it to relative.

Then I create a square SVG in Illustrator/Figma/similar. Make sure the SVG has no fill and no border.

Take that SVG and place it into the main div and give it a width of 100% so it always fills the full width of your main div.

Then I set the main div to whatever width I need for the design, I think in your example you stated you wanted it to be 100%, so set it to that. Then the main div will now expand as a square because of your SVG image, meaning the width will be equal to height.

Now that we have the right shape of our main div, add a new div inside the main div to hold your content, set it to absolute and width/heigh set to 100%. Make it flex if you want, but either way, now you can place content into this absolute positioned div, and it will always stay as a square, or width = height.

Hope this helps. Maybe you already tried this too haha, but just wanted to drop my thoughts. If you need any help implementing this, just let me know.