avvolgere un video youtube in un'immagine statica "frame" e mantenere il ridimensionamento reattivo

Question

Ho l'immagine qui sotto di un Macbook vuoto.

L'immagine è 1034 × 543.

voglio inserto un video di youtube all'interno della zona "grigia" della schermata. Voglio che appaia come se il video di YouTube fosse riprodotto sullo schermo del laptop.

Desidero anche ridimensionare l'immagine del laptop/video di YouTube, in modo che quando la pagina Web si trova in una visualizzazione tablet o mobile, l'immagine e il video si riducano per corrispondere.

Sto cercando di utilizzare fitvid.js per realizzare questo, ma non sto avendo fortuna - posso ottenere il video per adattarlo a una dimensione statica, ma non riesco a farlo adattarsi perfettamente al ridimensionamento, si deforma.

Qui di seguito è il mio markup corrente:

html:

<div class="col-sm-12"> 
    <div class="title"> 
    <h2>What's New</h2> 
    <small>ASC Sneak Peak</small> 
    </div> 
    <div class="macbook-wrapper"> 
    <iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

SASS:

.macbook-wrapper{ 
    background: url('../img/content/home/macbook.png') no-repeat; 

    .fluid-width-video-wrapper { 
    width: 97.5%; 
    background: #000; 
    } 
} 

Answer 1

Si potrebbe infondere un po 'di inganno con imbottitura e le percentuali, in questo modo si potrebbe farlo scalare di conseguenza. Fondamentalmente, impostando un contenitore che è puramente% base, con un iframe di posizione assoluto che si adatta di conseguenza al contenitore.

HTML

<div> 
    <iframe></iframe> 
</div> 

CSS

div { 
    position: relative; 
    padding-top: 25px; 
    padding-bottom: 67.5%; 
} 
div iframe { 
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat; 
    background-size: contain; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Faresti solo bisogno di aggiungere box-sizing: border-box; e alcuni padding per posizionare l'iframe all'interno dello schermo. Check it out http://jsfiddle.net/41sdho4w/

Per prendere un po 'oltre - Ecco una versione con un contenitore per aiutare a controllare il max-width e max-height piuttosto che fare affidamento sul corpo/viewport http://jsfiddle.net/4g9e3ywy/