html - 使用 css 和 html 在图像上插入视频

Question

我想在我的网站上创建一个图形，http://176.32.230.43/testdigitalmarketingmentor.co.uk/从笔记本电脑图片中播放视频的位置(因此看起来视频正在笔记本电脑屏幕上播放)。我还希望它具有移动响应能力(即根据屏幕尺寸重新缩放)。您可以向下滚动到“Showreel”以查看到目前为止我使用以下 css 和 html 管理的内容...任何帮助/建议/指导将不胜感激!

#laptop-panel {
        position: relative;
        width: auto;
        height: 625px;
        overflow: hidden;
    }

    #laptop-panel-tv {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png') no-repeat center;
    z-index: 10;
    }

    #laptop-panel-content-overlay {
        position: absolute;
        top: 70px;
        width: 100%;
        height: 444px;
        z-index: 12;

    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        max-width: 100%;
        height: auto;
      }
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div id="laptop-panel">
    <div id="laptop-panel-tv"></div>
    <div id="laptop-panel-content-overlay">
    <div id="laptop-panel-content">
        <div class="embed-container">
        <div style="width: 683px; " class="wp-video">
<!--[if lt IE 9]>    <script>document.createElement('video');</script><![endif]-->

   <div class="video-container">
<iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
   </div></div></div>            
   </div>
</div>

Answer 1

你可以使用这样的东西吗？它还有助于在 Youtube 上获得更多观看次数。

    #laptop-panel {
        position: relative;
        padding-top: 25px;
        padding-bottom: 67.5%;
        height: 0;
    }
    #laptop-panel iframe {
        box-sizing: border-box;
        background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png) center center no-repeat;
        background-size: contain;
        padding: 11.7% 17.9% 15.4%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

  <div id="laptop-panel">
        <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

编码愉快!