Wstawienie filmu w obraz.png (responsywność)

Witam,

Chciałbym umieśćić film w obraz png tak aby podczas skalowania obrazu(img) który zmienia swoją szerokość i wysokość podczas zmniejszania okna przeglądarki.

Film dostosowywał się do niego i również zmieniał się tak samo automatycznie.
Gdyby dało radę umieścić "iframe" w "img" nie bylo by problemu bo bym zastosował właściwości Position retalive a nastepnie position absolute.Zrobiłem to tylko i wyłącznie w sposób przy dodaniu wartości position absolute do img i iframe i faktycznie jedno się nalozylo na drugie ale to wtedy się dotosowuje do wysokosci przy zmiejszaniu okna przegladarki i zweżaniu (nie ma takiego efektu jak przy zastosowaniu samego zdjeciecia gdzie podczas skalowania szerokosci zmniejsza się i wysokosc i o to mi chodzi).

Czy jest to wykonalne?

Poniżej wrzucam zdjęcia tego jak zrobiłem i kody.

<div class="wrapper1">
<img src="images/cien1.png" class="shadow2"><iframe src="https://www.youtube.com/embed/Lnm3B31h7gs" class="film_glowny" frameborder="0" allowfullscreen></iframe>

</div>

.wrapper1{
  margin-top: 30px;
max-width:100%;
height: auto;

}
.film_glowny{
height: 71%;
width:73.5%;
position: absolute;
left: 23.2%;
top: 15px;
}
  .shadow2{
width:80%;
height: 80%;
margin:auto;
margin-top:-5px;
position: absolute;
top: 20px;
left: 20%;
}

Mam nadzieje że każdy będzie wiedział ocb :)

Proszę o pomoc

Pozdrawiam

Jak najbardziej - podejrzyj sobie źródło jak to jest u mnie zrobione:
http://kapitalny.com/kapchat_demo/

nie rozumiem budowy tego:)za malo widac :)

Masz tu całe źródło:
https://github.com/kapitalny/kapchat

Ciebie interesuje tylko:
index.html#kapchat_iframe_skeleton
kapchat_files/style/light.css

Po przeanalizowaniu powinieneś sobie poradzić.

Połączyłem dwa skrypty w jeden i problem się rozwiązał:) Dzięki za pomoc ;)