Streaming live at 10am (PST)

How to Showcase a prototype you screen recorded


#1

I wanted to display a screen recording of an app I prototyped for an iPhone. I was wondering what is the best way of showcasing my recording on my portfolio. I wanted my video to either auto play or have the user click the iPhone screen to see the screen recording.

Can you please help explain the steps I may need to take on Webflow?

Thanks!


#2

HI @King,

If I understand well what you are trying to achieve you could use the padding top trick to have a video with the correct aspect ratio.

1 - Instead of using the video component use the video background component
2 - Upload your screen recording as a background video (webflow will take care of the compression for you)
3 - To find your aspect ratio just a bit of math : (height of your video / width of your video) x 100
ex: 16/9 - (9/16)x100 = 56.25
4 - Set the padding top of your video background element to this result in % (ex: padding top 56.25%)
5 - Set the height of your video background element to 0
6 - As what you want is probably a portrait phone don’t adjust the width of the video background element but instead put it in a div (screen wrapper for ex) and set the desired responsive width there.

I added a few screenshots for clarity:

24

Hopefully this make sens and it is what you are looking for.

The reason behind is that padding top in percentage uses the width of it’s parent to do the maths.
You can read more and go deeper on the subject on MDN, stack overflow or CSS tricks by searching aspect ratio div or padding top trick.

Max


#3

Hi @Maximosaurus,

Thank you for your detailed response. This is exactly what I am trying to do. I am having a little trouble understanding the aspect ratio. How do I figure out the height and width of my video? Is there also extra steps I need to take to make sure the video background component is responsive for desktop and mobile view?


#4

The aspect ratio is the ratio between width and height. The dimension in pixel of your video will be what you use for the math. A full HD video will be 1920pixel by 1080pixel. You can find those by inspecting the information/properties of your video.

As you will set up the padding top in % it will be responsive to the width of the parent (screen wrapper). If you set the width of the parent to a responsive value like 50vw for example, you will have a video that is 50% of the viewport width and the aspect ratio will adjust accordingly.

I hope this make sens.