今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。

如果用JS画应该也是可以的，但一个简单的活动页没必要，快速实现用背景图调CSS最快。

1. 左侧放在框里的视频由两层实现
2. 一层为背景图，一层为视频，一开始刚好卡住，当屏幕宽度变化时要适配，最好不要媒体查询适配大小

可以尝试一波 css padding 百分比的魔法了

以下实现代码：

css :

.iphone-box {    padding: 171% 0 0;    position: relative;    img.iphone {      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;    }    .video-box {      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      padding: 26.7% 0 0;      video {        width: 100%;        height: 100%;      }    }

• 图片的父级元素 是没有宽高，设置padding占位，
• 父元素设置position:relative;
• 子元素设置 position:absolute;
• 父元素将子元素包裹
• 父元素padding设置为百分比
• 子元素的宽高随着父元素宽的变化 等比变化，不会出现cover形式的截图
• 由此叠在父元素里面的两层的相对位置就比较稳定
• padding的比例要符合一个计算规则(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width 当然也可以看着顺眼调就好了