Domanda

La mia domanda è relativa a HTML e HTML puro. Sto lavorando a un nuovo design per la mia prima pagina su un social network chiamato kwick e al momento voglio creare una sorta di spazio per il mio video preferito.

Ora il mio problema è, come realizzo qualcosa del genere:

Faccio una foto del mio iPod in questo modo (solo un esempio, non è il mio iPod) http://www.clein-online.de/schmuck_projekte/files/ipod_nano_schutzhuelle. jpg

Ora voglio creare questa immagine come gif e ritagliare il display, ora dietro quell'area ritagliata, dovrebbe esserci un video di YouTube, in modo che il player di incorporamento NON sia mostrato completamente, intendo, il il giocatore è completamente lì, ma l'immagine è un aspetto.

Come farlo?

È stato utile?

Soluzione

Non è necessario tagliare affatto l'immagine. Crea un div che abbia abbastanza spazio per l'intera immagine dell'iPod e usa i CSS per renderlo l'immagine di sfondo (possono essere stili incorporati se non puoi aggiungere i tuoi file CSS).

<div style="background:url(ipod.jpg); width:300px; height:400px;">
    <iframe src="..." style="margin: 25px auto 0;" width: 250px; height: 200px;></iframe>
</div>

Applica margine, larghezza e altezza a iframe o embed o object per posizionarlo all'interno del div che ha l'immagine di sfondo dell'iPod.

Puoi impostare l'iframe sulla dimensione che ti serve e farlo nascondere eventuali overflow se necessario, ma non credo che sarai in grado di nascondere parti del flash se non hai il controllo dell'incorporamento codice.

Altri suggerimenti

Il tuo maggiore ostacolo sarà garantire che il tuo WMODE = trasparente . L'impostazione di WMODE su trasparente eviterà che la tua schifezza flash appaia sempre sopra altri contenuti. Quindi, posiziona semplicemente un'immagine con trasparenza nella posizione corretta sul video.

Dato che non hai incluso alcuna informazione sulla precisione con cui stai includendo il tuo file flash, non posso davvero dirti quale metodo dovrai usare per impostare WMODE. Fai un po 'di googling e tutto sarà chiaro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top