video youtube in modulo html personalizzato sull osfondo di una immagine

[BubbleBubbli]

Ciao tutti.
Ho realizzato un template personalizzato in joomla 2.5.
Nella home page ho messo una immagine di una tv nella quale mi piacerebbe inserire un video youtube in modo tale che il video venga visualizzato "sotto la telvisione". In sostanza io ho un div che ha come immagine la televisione. All'interno del div c'è un modulo html personalizzato dove ho inserito il codice embed youtube.

Una volta inserito il codice nel modulo k2 ho un hmtl così:
<div class="player"><div class="placeholder"><div class="moduletable">
<div id="k2ModuleBox96" class="k2CustomCodeBlock"><iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/anjRkzHEtyU"></div></div></div></div>

Il codice CSS è invece il seguente:

.player {    background-image: url("../images/TV_02.png");    float: left;    height: 500px;    margin-top: 250px;    position: absolute;    width: 500px;}
.placeholder {    height: 20%;    margin: 205px auto 0 74px;    width: 60%;}
.moduletable {}
div.k2CustomCodeBlock {}

Ho provato a giocare con posizioni e z-index ma non riesco a fare in modo che il video venga visualizzato dietro la televisione..

Grazie a tutti per l'aiuto

[Fabrizio Fiorita]

Ciao.
Mi sembra che nell'HTML manchi la chiusura del tag <iframe>.
Hai provato a dare le dichiarazioni z-index (ovviamente diverse) a .player e .placeholder?

[BubbleBubbli]

Ciao e grazie per la risposta,
La mancata chiusura di Iframe è un errore di trascrizione e si, ho provato a dare diversi z-index a quasi tutti i div ma non funziona... Ho provato anche ad inserire nel codice i frame il comando wmode=transparent ma nulla....

[BubbleBubbli]

In particolare ho provato questo codice:
.player {    background-image: url("../images/TV_02.png");    float: left;    height: 500px;    margin-top: 250px;    position: absolute;    width: 500px; z.index:30;}
.placeholder {    height: 20%;    margin: 205px auto 0 74px;    width: 60%; z-index:10;}
.moduletable {}
div.k2CustomCodeBlock {}

[Fabrizio Fiorita]

Con quegli z-index fai proprio il contrario: più è alto il numero più avanti sta l'elemento.
Metti a .player la dichiarazione
z-index:-100;
e metti agli altri tre elementi .placeholder .moduletable e .k2CustomCodeBlock la dichiarazione
background:transparent;

[BubbleBubbli]

Infatti il mio intento è mettere il .player (che contiene come sfondo l'immagine della televisione) avanti a tutto e fare in modo che il video venga visualizzato dietro. Bucando poi opportunamente l'immagine della televisione dovrei ottenere l'effetto come il video fosse all'interno della tv...

Visto che sei così gentile da darmi retta, ti può aiutare avere l'url del sito? Dato che ci sto ancora lavorando è off line per cui potrei mandarti nome utente e password per messaggio privato... ce ne dici?

[Fabrizio Fiorita]

Non funziona proprio così: come fai a "bucare opportunamente" lo sfondo, visto che l'immagine è di sottofondo? Potresti usare una gif con canale alfa, ma non sono sicuro che puoi far vedere un'immagine attraverso uno sfondo...

Grazie della fiducia, ma veramente non ho molto tempo per analizzare a fondo il tuo problema, ne ho già abbastanza con i miei (se vai a vedere il mio sito postato qui sotto vedi che di problemi ne ho anche tanti  )

[BubbleBubbli]

Grazie comunque...
secondo te cambia qualcosa se provo a inserire l'immagine nello stesso div non come sfondo?

[Fabrizio Fiorita]

Di solito c'è una sola risposta a molti problemi: prova!