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>

！