Video within background image?

@brandrsn wrote:

Hi guys,

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

iPhoneGIF.gif290x514 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

Posts: 7

Participants: 2

Read full topic