Wstawianie filmu z youtube pod obrazek png

Witam,

chciałbym wstawić filmik z youtube pod wycięte zdjęcie.Mam zdjęcie ekranu TV z wyciętym środkiem(zdjęcie.png).Chce tak zrobić żeby film był pod obrazkiem aby dawało to złudzenie że faktycznie film jest w telewizorze.Próbowałem metodą "z-index" ale albo coś robie źle albo się nie da.

oto metoda jakiej próbowałem

<div id="tv">
	<div id="film"><iframe width="300" height="157" src="https://www.youtube.com/embed/aH-Irmxm7oU" z-index="-1" frameborder="0" allowfullscreen></iframe></div>
</div> 

#tv{
background:url(../images/tv.png);
width:376px ;
height:424px ;
z-index: 999999;
}

Proszę o pomoc

Pozdrawiam

zrób kontener np ten id="tv" co masz, daj mu position: relative;, w środku wrzuć iframe'a z youtuba a obok iframe'a daj img z obrazkiem telewizora z position: absolute</code> i wyższym <code>z-index. Wtedy już tylko kwestia przesunięcia obrazka/iframe'a aby się to zgrało

a na co tam absoluty czy z-indexy?

zakładając, że fotka tv ma 400x300, a film 300x200 to robisz po prostu kontener 400x300 z tłem obrazkowym i w środku iframe o wymiarach 300x200 + 50px marginu od lewej i od góry. koniec.

dzek69 napisał(a):

a na co tam absoluty czy z-indexy?

bo pewnie nie chodzi o ramkę tylko przykrycie obrazkiem starego telewizora z zaokrąglonymi rogami - obrazek musi być NAD

Jeżeli miałem zrobic tak:

<div id="tv">
<iframe width="300" height="157" z-index="-1" src="https://www.youtube.com/embed/aH-Irmxm7oU"></iframe><img src="images/tv.png" position="absolute" z-index="99999"></div> 

#tv{
position: relative;
}

To niestety nie działa

A jeżeli chodzi o odpowiedź @dzek69. To też nie działa.

<div id="tv">
<iframe width="300" height="200" margin-top="50px" margin-left="50px" src="https://www.youtube.com/embed/aH-Irmxm7oU"></iframe></div> 

#tv{
background:url(../images/tv.png);
width:400px ;
height:300px ;
}

To też nie działa :)

Olśnienie7 napisał(a):

co to ma być? najpierw idź naucz się podstaw html i css

fakt powinienem to umieścić w css ale to nie zmienia faktu że nie o to mi chodzilo. Efekt ma być taki jak byśmy oglądali TV.Na górze obrazek pod spodem film :)

Wizualizuje:)Obrazek ma być nad filmem:)

Będzie trochę problem z takim rozwiązaniem na niektórych przeglądarkach, ponieważ element "nad" będzie zbierał kliki.

Dwa rozwiązania: SVG (który może być "dziurawy" z tego co kojarzę, a na pewno "pointer-events":
http://caniuse.com/#search=pointer-events

http://jsbin.com/mumomasoda/1/edit?html,css,output

ale userzy Cię zjedzą za coś takiego - to tylko przeszkadza, zasłania kontrolki filmu itd.

Nie trzeba kombinować w ten sposób
Youtube udostępnia API do kierowania odtwarzaczem: https://developers.google.com/youtube/youtube_player_demo?hl=pl
Wystarczy zrobić swoje kontrolki obok do sterowania, można nawet przywołać do życia "przyciski" na obudowie telewizora. Użytkownicy raczej nie zjedzą bo sądząc po rozwiązaniu to jakaś stronka domowa z jednym filmikiem lub ewentualnie jakaś informacyjna / wizytówka / portfolio - na pewno nie strona na którą wchodzi się codziennie

A mi OP nie wygląda na osobę, która będzie się bawić z YT API :)