Einfügen eines Videos über ein Bild mit CSS und HTML

Question

Ich bin auf der Suche nach einer Grafik auf meiner Website, http://176.32.230.43/testdigitalmarketingmentor.co.uk/ wo ein Video aus einem Bild von einem Laptop gespielt wird (so sieht es aus wie das Video auf dem Laptop spielt Bildschirm). Ich möchte auch, dass diese mobil reagiert (d. H. Neuskalierung abhängig von der Bildschirmgröße). Sie können nach unten zu "Showreel" scrollen, um zu sehen, was ich bis jetzt mit den folgenden css und html geschafft habe ... Jede Hilfe/Beratung/Anleitung wäre willkommen!

#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

Würden Sie in Ordnung so etwas wie dies mit? Es hilft auch, mehr Ansichten auf Youtube zu haben.

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

Glücklich Codierung!