Wątek przeniesiony 2015-09-26 13:50 z Webmastering przez dzek69.

Wstawianie filmu z youtube pod obrazek png

0

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

0

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

0

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.

0
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

0

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

0

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 :)

0
Olśnienie7 napisał(a):
<iframe width="300" height="200" margin-top="50px" margin-left="50px">

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

0

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 :)

0

Wizualizuje:)Obrazek ma być nad filmem:)

1

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0