css - 如何在笔记本电脑图像中设置嵌入视频

Question

我有这台笔记本电脑的图片:

http://www.ildottoredellepiante.it/formazione/wp-content/uploads/2017/05/laptop-png-6754.png

我想将它添加到我网站的“section-743”(就在页面顶部的 slider 之后)--> http://www.ildottoredellepiante.it我很想在屏幕图像的黑色部分嵌入一段视频。视频网址来自 youtube，如下所示:www.youtube.com/watch?v=ucXRLnIkTyQ

此外，它会响应式工作吗？

期待各位天才的回复:)

Answer 1

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

div {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 543px;
    margin: 0 auto;
}
div div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
div iframe {
    box-sizing: border-box;
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 11.9% 15.5% 14.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这里是 jsfiddle:http://jsfiddle.net/4g9e3ywy/

希望对您有所帮助。