Video in stile riga che si adatti allo schermo 
Auteur : Pasqualino D.
Visité 691,
Followers 2,
Partagé 0
Buongiorno a tutti, ho inserito un video nella home page attraverso lo stile righe, ma non si adatta allo schermo. Vorrei una roba del genere: Demo qualcusa riesce a darmi una mano?
Grazie!
Posté le
... molto semplice con un mio vecchio "Uovo di Colombo"; ...nella riga in cui applichi lo sfondo video devi devi usare una sola cella estesa a tutta larghezza con unico oggetto immagine "png" trasparente...
... non servirebbero, ma qui trovi altre istruzioni e le mie due immagini png in rapporto (16:9). per fare il test e volendo da poter usare direttamente:
https://helpcenter.websitex5.com/fr/post/243912
...!.... oppure, ve vuoi usare altri oggetti nella riga, prova con l'oggetto Content Slider, e forse senza bisogno dei miei codici Extra, che in ogni caso si tratterebbe di un copia/incolla...!...
.
Auteur
Si avevo già inserito il tuo metodo, solo una cosa, il video adatta le dimensioni ma non il contenuto. Non si riesce ad adattare anche il contenuto del video?
... per come è organizzata adesso la prima riga, non va bene, trattandosi di oggetti tutti separati e quindi da controllare individualmente, il che non ne vale proprio la pena...
... al limite se per il contenuto si trattasse di testo, potresti incorporarlo in grafica nello stessa immagine png su trasparenza alfa, e sarebbe un ottimo risultato senza stress...
...
... comunque per questi scopi l'oggetto più adatto è quello che di ho indicato prima, Content Slider, ... che accoppiato ad un mio esclusivo SuperCodice ti permetterebbe di ottenere il Content Slider e relativo video in rapporto razionale a tutta luce disponibile orizzontalmente...
... per farti capire ti posto un esempio di Giancarlo che > VEDI QUI controllato con il mio codice, ove tu non farai uso delle immagini dello slideshow ma userai il tuo video come sfondo della riga..
... oppure usa proprio lo slideshow che con il mio codice offre interessanti ed unici risultati...
... in questo caso con il mio codice si può ottenere sia lo slideshow in rapporto razionale con le immagini, (per es. in 3:2), o oppure in fullscreen/cover come puoi notare nell'esempio...
... quindi nel caso fatti sentire a modifiche pubblicate, così verificherò per te il codice più adatto...
.
ciao
.
Auteur
Chiedo scusa, forse non mi sono spiegato bene, come contenuto intendo il video stesso, in pratica le dimensioni le riduce ma il video invece di ridursi si taglia. Io vorrei che si riducesse ma rimanesse intero.
Auteur
Lo vorrei come la Demo invece quando le dimensioni si riducono il video si vede sempre grande quindi se ne vede solo una parte.
... no! .. devi fare per come ti ho detto prima, non è difficile...
... se invece vuoi continuare ad usare la struttura del link del Demo il video si ridimensionerà in modalità cover(*) per come si vede adesso, ...e non è possibile intervenire negli altri oggetti della stessa riga senza dover riprogrammare il tutto...
(*) - ridimensionamento razionale con posizionamento C/C sulla priorità W-H della riga ospite...
...
Auteur
Perdonami ma non ho capito che metodo usare e quale supercodice inserire. Ho provato col contenuto slider ma non cambia nulla, il video non si riduce, cambiano solo le dimensioni. Potresti spiegarmi meglio come fare.
Auteur
Il video si comporta così: demo come vedi se restringi il browser le dimensioni del video si riducono mentre lo stesso video rimane grande. Io vorrei che anche il video si riducesse insieme alla finestra. Secondo te riusciamo a farlo?
Auteur
Trovato il sistema... in index.css modifico la stringa così:
#imPageRowGraphicsVideo_1 { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
Ora ti chiedo è possibile inserire questa stringa da website senza entrare nel file e doverlo cambiare ogni volta?
... adesso nella seconda demo stai usando un esempio completamente diverso, ma con il mio metodo antecedente, cioè quello con una riga senza contenuti, solo con la mia immagine png...
...!... ma non funziona come dovrebbe perchè non hai applicato correttamente le istruzioni...!...
> ... la riga deve essere estesa a tutta larghezza cliccando nelle apposite opzioni...
> ... anche la cella della immagine png deve essere estesa a tutta larghezza cliccando nelle apposite opzioni...
... in questo caso non servono codici aggiunti...
.
.
Auteur
Ho la versione 16 pro, in Generale non c'è nulla nella Visualizzazione ho l'opzione Ridimensionamento automatico ma null'altro
Auteur
In pratica nello stile riga ho messo la spunta "Estendi alla larghezza del browser", ma nella cella immagine non ho nessuna opzione per estendere a tutta la larghezza
Buongiorno!
La funzionalità per estendere un Oggetto a tutta la larghezza del browser non era ancora disponibile nella versione 16. Nella tua versione la soluzione è quindi quella di inserire il contenuto che vuoi estendere in Stile Righe. Alternativamente puoi passare alla nuova versione, che include tra le altre anche questa funzionalità.
A tua disposizione per eventuali chiarimenti, ti auguro una buona giornata.
Auteur
Elisa mi confermi che con la nuova vesione pro posso vedere il video che ri riduce in base allo schermo come questo?
...attendi che cosa ti dirà Elisa, ...ma secondo me il video prenderebbe aspetto sempre in modalità COVER...
... ... ... a meno che non userai sempre il mio metodo con la mia immagine PNG...
.................................................................................
... da quel che vedo ora nel tuo LINK non hai aggiornato il tuo esempio nel modo che ti avevo ultimamente detto, per cui non posso andre avanti per valutare per il video...(*)...
... invece, per il LINK del demo che hai indicato da prendere come esempio, non so che concetto hai di responsive, ma il video è in modalità COVER, infatti viene anche lì vignettato...!...
...
(*)... se crei un esempio nel modo da me detto con il mio PNG, indipendentemente dal fatto che la cella non si possa estendere, ...e poi nel caso si potrà vedere di controllarne l'aspetto in modalità razionale a tutta larghezza, cioè vedere il video nella su intera luce...
.
ciao
.
Auteur
ho aggiornato allultima versione, ma non trovo il modo per allargare oggetto a tutta la larghezza del browser
abilita qui
e qui
azzera anche i margini della cella...
Auteur
Ok ma con la nuova versione di website pro posso fare una home page col video e gli oggetti testo e pulsanti come questo? demo
il sito che hai linkato è stato fatto con la versione 2021.2.8 di WebsiteX5...
Auteur
quindi non si puo fare con le vesrsioni successive?
Auteur
A me interessa il metodo usato
premesso che non ho capito cosa non riesci a fare...
se si fa con la 2021, si fa anche con le successive
Auteur
video nello stile righe con oggetto immagine trasparente con scritta e pulsante?
Ciao, premetto che non ho letto tutto il post, ma se vuoi estendere oggetti a tutto schermo puoi utilizzare le vecchie tecniche di QDC, trovi alcune info anche su vecchi articoli del mio BLOG:
https://www.giancarloweb.it/blog/index.php?swiper-grid-slider-full
https://www.giancarloweb.it/blog/index.php?semplice-tutorial-per-inserire-una-galleria-full-screen-in-v13
https://www.giancarloweb.it/blog/index.php?stile-delle-righe--row-
Non so se è quello che cercavi, comunque prova a darci una guardata, ciao.
Naturalmente questo per versioni precedenti alla V17, per le successive fai con le opzioni da programma come suggerito da Claudio.
Ciao Pasqualino, potrei aver capito male io quel che vuoi ottenere ma credo che in quella demo non sia stato fatto nulla con codice extra.
Lo stesso video inserito nello stile righe in un mio progetto vuoto, SENZA nessun tipo di codice extra, ha lo stesso comportamento che vedo nella demo da te indicata. L'unica caratteristica di quello specifico video è che ha al centro i "soggetti" principali, in questo caso le abitazioni.
Test qui su progetto vuoto: https://www.bozzasito001.altervista.org/videostilerighe01/
x Pasqualino D., ... non hai seguito i miei suggerimenti, che forse(!) avrebbero portato ad una soluzione semplice ed immediata con qualcuna delle mie invenzioni esclusive...
... disperdendo gli interventi ti allontani dal risultato...
... bisogna essere padroni del concetto in causa cosa che non risulta per tutti chiaro...
... quindi per l'ultima volta ti propongo di creare e pubblicare un esempio con il Content Slider in modo che io possa valutare...
...!... se lo farai io ritornerò volentieri qui per aiutarti, ...altrimenti non considerare il mio Post ed uscirò da questo Topic...!...
.
ciao
.
Mi sono imbattuto su questo post cercando del codice extra. Il sito di riferimento è un mio vecchio sito. Devi mettere due separatori con altezza che deciderai tu in base alle dimensioni del video. In mezzo ci metti due oggetti testo - uno sotto l'altro per gli slogan settandoli a 36px e 14px per la descrizione. Gli oggetti testo possono essere sostituiti da due oggetti Titolo che poi setterai su ridimensiona automaticamente e Sotto un pulsante contatti. Lucchetta tutto ed estendi tutto! Nelle opzioni inserisci il video e una immagine di copertina (il video lo vedrai solo on-line o in locall host). Vai su Responsive e quando arrivi ai 600 px nascondi i due separatori per i 480px. Personalmente ho adottato altre misure per centrare gli slogan ma C'è un video di Giuseppe Guida che spiega meglio tutta la QUESTIONE .
Ci sono altre soluzioni magari più complesse con codice extra per l'oggetto content slider ma la soluzione più semplice è quella che ti ho elencato io sopra.
Il link diretto al mio video citato da Roberto M. è questo:
https://youtu.be/80lH77LgvuA?si=24lUgQm7KIxyoJUo
P.S. Roberto, il tuo link mi dà una pagina bianca. Ciao
Buongiorno Pasqualino,
confermo che puoi ottenere il risultato che hai indicato con il tuo link con la nuova versione. Qui trovi alcune guide che potrebbero esserti utili:
https://guide.websitex5.com/it/support/solutions/articles/44001697155
https://guide.websitex5.com/it/support/solutions/articles/44001795337
Grazie! Buona giornata.
@Giuseppe Guida! Azz...... non me ne sono accorto probabilmente ho copiato velocemente il link prima che si riducesse al link del video.