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

編碼愉快！