If you see on the website: https://www.aeternity.com/ directly at the top they have a iphone.png image (i’ve attached[Uploading…] it) I want to know how to add a moving video background into the area where the image is? basically how they did this and is it possible with my Pro theme?
Thank you in advance.
Hi William,
Thank you for writing in, the way they created that animation inside the phone image requires a customization since that is an mp4 video that is contoured to fit in the phone image.
I advise that you used a .gif (animated) format image instead, something like this.
Hope it helps,
Cheers!
I know that kind of image customization is beyond the scope of my Theme.co support but could you point me in the right direction of exploring how to get this done? Yes I thought of doing a animated gif inside of a iPhone mockup to achieve a similar affect but I really want to learn how they did this effect with the mp4 video contoured inside the iphone, how is that even achieved? if you could point me in the right direction to get an idea and learn how to do it I would appreciate it, I have experience in video editing and photoshop.
Hi William,
Thanks for asking again!
They have done using two layers. In one layer the video and another layer is the phone image with transparent background and the middle area.
https://www.aeternity.com/user/themes/aeon/img/iphone.png
So the video displayed inside the phone. You can use similar things with custom CSS.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
