Hello everyone, I am new at Webflow and I have some issues about adding a iPhone mockup video that loops and autoplays. How can I add that?
Thank you all!
on setting tab all controls are there , you can choose form there . Top right side
Could you be more specific, when I select the video link I don’t have any settings about autoplay and loop.
are you going for bg -video or just a video from vemo or yt ?
I am going for bg, I will add an iPhone mockup with an app video in it.
Background video autoplays by default. Can you share your published link where things don’t work for you?
Sorry for late response. I have added an image of what I meant. It’s autoplays and loops. But I can not fit to the desktop screen on image. Thanks for helping!
Can you share your published link where things don’t work for you?
Apologies, I meant to ask for a read-only link to see how you set that background image up.
I am new to Webflow so feel free to give advice about layouts too! I am struggling about responsiveness.
So you could add absolutely positioned video background element inside of your .hero-right-content element with these settings.
Also note that for the absolutely psitioned child to work you will need to make your parent element’s (.hero-right-content) position relative.
Yes thank you, but it’s not responsive, when I go to 1240px, background video slips. How can I fix that? Or should I create the video with desktop frame?
Thank you.
It slips because of the .hero-wrapper being set to align:stretch (it stretches the block with image breaking its relative positions). Set it to align:start. Now you could modify the size of your absolutely positioned child to match the image’s screen and it will stay that way when resizing.
Do not use pixels when positioning your absolute video. Use percents.
Thank you for your quick response!
I did, however it is still not responsive. I have added a link again too.
You forgot about this
Also you don’t need to put that video into another div. Once you do the above reposition and resize your video as necessary.
Yes finally, you are great!
1 Like
I have another problem that I face, I didn’t want to open a new subject since new problem related to this subject. how can I make my site to look like the image that I uploaded?
I am not sure I understand the question.
Sorry my bad. I want my Webflow site’s hero section to look like the image that I add. Problem is that when I scale down the telephone and laptop to fit just like in the image that I share, the text content size stays same.
This is how I want it to look:
I have been trying to positioned with relative settings but I can not make it happen.
Here is my Webflow link:
https://preview.webflow.com/preview/apps-stunning-project?utm_medium=preview_link&utm_source=designer&utm_content=apps-stunning-project&preview=34053038bd64ac9cfdc5294678303605&mode=preview
Probably you need to remove the 40% width from your tabs element