如何使用包含背景图片的内容叠加Html视频？

Question

以下是一个例子：

http://jsfiddle.net/41sdho4w/

<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>

  video, iframe {
    box-sizing: border-box;
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 4.9% 17.5% 7.8%;
  }

我想用一些内容（img）覆盖笔记本电脑内的视频（不是整个视频标签）。我该怎么做呢？

最终，当点击叠加层时，视频会自动显示并开始播放。奖励积分是一个解决方案，牢记这一点！

Answer 1

http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/

本教程将回答您的问题......