Back to top

Autore Topic: modulo html personalizzato: overlay testo su video in background  (Letto 1311 volte)

Offline cosmico72

  • Esploratore
  • **
  • Post: 87
    • Mostra profilo
Buongiorno a tutti,
non riesco a venirne a capo: in un modulo html personalizzato, ho bisogno di mettere un video in background con testo in overlay
ho provato a inserire il seguente codice
Codice: [Seleziona]
<video src="urlvideo.mp4" preload="auto" autoplay="autoplay" width="100%" height="" id="big-video-vid_html5_api" class="vjs-tech" style="left: 0; top: 0; position: fixed; width: 100%;" type="video/mp4" data-setup="{}"></video>
</p>
<h2 style="text-align: center;"><span style="color: #ffffff;">testo in sovrimpressione</span></h2>
<p style="text-align: center;"><span style="color: #000000;"></span></p>
ma come risultato ho il video che scorre senza problemi ed il testo sotto.
Chi mi aiuta? grazie!

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:modulo html personalizzato: overlay testo su video in background
« Risposta #1 il: 03 Apr 2017, 15:28:19 »
quel codice e mal strutturato, un acozzaglia di roba che non ha senso.

cerca un esempio on line con "testo sopra immagine", magari in html5 e poi fai i relativi cambiamenti inserendo il codice del video.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline cosmico72

  • Esploratore
  • **
  • Post: 87
    • Mostra profilo
Re:modulo html personalizzato: overlay testo su video in background
« Risposta #2 il: 04 Apr 2017, 13:59:47 »
Intanto grazie per la risposta, avevo provato a guardare in giro ma non capisco quale sia im problema,
con il primo post il risultato era il video sopra e le scritte sotto,con altri tentativi invece...
inserendo il seguente codice
Codice: [Seleziona]
<div data-vide-bg="" data-vide-mp4="http://...video.mp4"
class="call-to-action-main-wrapper" style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;">
<video style="visibility: visible; margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1437px; height: auto;" autoplay="" loop="">
<source type="video/mp4" src="http://...video.mp4">
</source>
</video>
<>
<div class="col-to-action-wrapper">
<div class="background-video">&nbsp;<>
<div class="col-to-action-content text-center">
<h1>descrizione</h1>
<p>Travel between 22nd August to 23 November and get exciting offers along with a sure<br> 10% cash discount.</p>
<a class="btn btn-primary">Buy Now</a><>
<><>
preso da un template che ho acquistato e creato un nuovo modulo, lato backend (con JCE preview) sembra tutto ok
ma lato frontend niente! si vede solo il testo centrato e lo spazio in altezza del video
lo fa con template T3 Framework

Offline cosmico72

  • Esploratore
  • **
  • Post: 87
    • Mostra profilo
Ho risolto... in modo non proprio corretto direi ma intanto ho ottenuto il risultato desiderato.
Come ho fatto? il codice andava bene  mi è bastato rendere trasparente lo sfondo della posiione del modulo.
non ho ancora capito come e perchè non funziona lo "z-index", ho provato a portare i valori del video a 1 e del testo a 2 oppure a 0 e 1 ma comunque non ho ottenuto risultato. per ora mi accontento e va bene così.
Grazie

 



Web Design Bolzano Kreatif