zawijanie wideo z youtube w statycznej "ramce" obrazu i zachowanie responsywnej zmiany rozmiaru

Question

Mam poniższy obraz pustego MacBooka.

Obraz jest 1034 x 543.

Chcę wstawka video youtube wewnątrz "szarej" strefy ekranu. Chcę, żeby wyglądało to tak, jakby wideo z youtube grało na ekranie laptopa.

Chcę również, aby obraz z laptopa/YouTube był skalowany, więc gdy strona jest w widoku tabletu lub telefonu, obraz i wideo zmniejszają się, aby dopasować.

Próbuję użyć fitvid.js, aby to osiągnąć, ale nie mam szczęścia - mogę sprawić, aby wideo mieściło się w jednym rozmiarze statycznym, ale nie mogę go dopasować do rozmiaru, jest zdeformowane.

Poniżej jest mój obecny markup:

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

Można zaszczepić jakieś sztuczki z padding i procentów, że sposób, w jaki mógł odpowiednio skalować. Zasadniczo, utworzenie kontenera, który ma czysto% bazy, z pozycją bezwzględną, która skaluje się odpowiednio do kontenera.

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%; 
} 

Byłbyś wystarczy dodać box-sizing: border-box; a niektóre padding do pozycjonowania iframe na ekranie. Sprawdź to http://jsfiddle.net/41sdho4w/

wziąć to kawałek dalej - oto wersja z pojemnikiem, aby pomóc kontrolować max-width i max-height a następnie opierając się na ciele/rzutnia http://jsfiddle.net/4g9e3ywy/