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

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

我想把它添加到我网站的743部分，就在页面顶部的滑块->之后，我想在屏幕图像的黑色部分嵌入一个视频。视频url来自youtube，如下所示：www.youtube.com/watch？v=ucXRLnIkTyQ

此外，它是否会以负责任的方式工作

我期待您的回复，天才们：

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

这里是JSFIDLE：

---

希望有帮助。

你能分享你的代码而不是你的网站吗？我希望我能，但是我正在寻找代码…我正在尝试做一些非常类似的事情->但是我不知道如何调整我网站的代码以及在哪里放置什么…对不起，我是一个初学者，希望学习。感谢您的帮助。我尝试插入此代码的部分是section-743，我想知道如何在模板编辑器中添加此代码。这很复杂，但如果有人帮忙，我相信我们可以做到：嘿，谢谢你的帮助。我在代码中看不到youtube src的位置……我有点困惑。我能把这个代码直接添加到部分吗？嘿，雷米，谢谢你的回复。我还是有麻烦。如何直接在wordpress上添加代码？通过编辑器还是通过文本选项卡在页面上？只需编辑模板根目录下的style.css，页面源代码在编辑页面时会抛出所见即所得，切换到文本到源代码。我仍然很困惑：应该在style.css中输入这些代码。我是一个初学者，正如我所说的…：

<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>

<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>

.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;
}