Question

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

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

我想将它添加到＆＃34; section-743＆＃34;我的网站（在页面顶部的滑块后面） - ＆gt; http://www.ildottoredellepiante.it我希望在屏幕图像的黑色区域内嵌入视频。视频网址来自youtube，内容如下：www.youtube.com/watch？v = ukXRLnIkTyQ

此外，它是否会起响应作用？

我期待你的回复天才：）

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/

希望它有所帮助。

Answer 2

<div class="video-wrapper">
  <div class="image">
    <img src="https://previews.123rf.com/images/whilerests/whilerests1407/whilerests140700017/29617350-open-laptop-with-blank-screen-isolated-on-white-background.jpg" alt="">
  </div>
  <div class="video">
    <video width="100%" muted autoplay>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support HTML video.
    </video>
  </div>
</div>

这是CSS。也许这会帮助你。

.video-wrapper {
    position: relative;
    max-width: 1300px;
}

.video{
position: absolute;
    width: 883px;
    height: 530px;
    padding-top: 45px;
    background-color: #000;
    left: 650px;
    top: -2px;
    transform: translate(-50%, 28%);
}
.image{
    position: absolute;
    z-index: 0;
}

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

2 个答案: