Video within background image?

Design help General
1

Hi guys,

In another (non-Webflow) site, I have a video of an iPhone screen ‘housed’ within an image of an iPhone. See below:

290×514 2.39 MB

My HTML for this is as follows:

<div id = "iphoneContainer">
  <video autoplay loop muted id = "iphoneVideo">
    <source src="img/iphone.mp4" type="video/mp4" />
  </video>
</div>

And CSS is this:

#iphoneContainer {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
#iphoneContainer #iphoneVideo {
    box-sizing: border-box;
    background: url(../img/iphone-sm.png) center center no-repeat;
    background-size: contain;
    padding: 9% 8.5% 9%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Any ideas how to replicate this in Webflow?

I’ve got this far (i.e. not very far!). I’m not precious about the method (for example, I don’t care if the box-sizing method is used), I just want the end result.

Many, many, many, thanks.

Brian

2

It would be more efficient if you could have just the video for the screen, and an image of the phone.

You’d have to put the image of the phone in a div, make the div position:relative.
Then add a Video BG element in the div too, upload your video, give the video bg position:absolute and adjust the position.

You should end up with an autostart looping video. That’s the fastest way. you can also do it with a custom code widget but then you have to host your videos by yourself.

tip: if using the videobg widget, uplod your bestest possible video under 30mo. WF will manage conversion and optimisation.

3

Sorry I hadn’t seen your link :slightly_smiling:
So you have the video of just the screen. Just use a video bg widget instead of the custom code. it’s easier to resize to your needs. And follow my simple settings above.

http://vincent.polenordstudio.fr/snap/efkfc.jpg

4

Thanks for your reply, Vincent.

I’ve tried to follow your instructions verbatim, but as soon as I change the video position to absolute, it just disappears.

https://preview.webflow.com/preview/testing7979?preview=edcdb57546f1852b7cbc53ccd4278ddd

I’ve also tried making the position relative, then resizing the bg video. But it just seems to resize the container, and not the video itself.

So no matter which method I try, I can’t seem to get it to work. Could you jump in and take some screenshots of what the design panel looks like when you’ve got it working, please?

Thanks again,
Brian

5

Yes you need dimensions for your elment. See how I did.

https://v.usetapes.com/BqRGjVxQrR

Now you should produce a new video at exactly 264x466 and you’d be done with it I think. Because here I don’t get it, it doesn’t resize…

6

Thanks Vincent. I can see what you’ve done there.

I’d rather not change the size of the video and then use it as a constant. As the video size will need to change depending on the viewport anyway, I’d rather work out how to alter the video size from within the code.

Can anyone else assist?

To this link I’ve added 3 videos (one in each of the three methods Webflow supports; video element, background video element and embedded video. I can’t get any of them to line up in the iPhone frame without cropping out half the video.

Any thoughts?

7

Try this? Seems to work this morning :slight_smile:

http://vincent.polenordstudio.fr/snap/r6l1w.jpg

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.