WebSite X5Help Center

 
Andrea Z.
Andrea Z.
User

Il video non si adatta al formato responsive  it

Autore: Andrea Z.
Visite 1147, Followers 2, Condiviso 0  

Grazie in anticipo per chi mi aiutera', 

ho inserito un video (con scritte incorporate) in webm in "stile righe", il problema e' che in base ai vari schermi il video non si adatta, e ad esempio sul mio iphone non riesco nemmeno a vederlo... non appare...

il sito , giusto per farvi capire e' : www.lionmultiservice.net

Mi potete dare la stringa per risolvere il problema e farsi che quel video in automatico prenda la giusta risoluzione?

Grazie

ps. in questo momento sto usando web xpro 5 2019.2.9 (dovrei fare un sito molto semplice e non vorrei ricomprare l'aggiornamento per l'nnesima volta)

Postato il
15 RISPOSTE
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...se ti interessa l'aspetto razionale del video di sfondo, e se non devi utilizzare altri oggetti sovrapposti allo sfondo della riga, come mi pare che sia adesso, allora è molto semplice... 
...basta usare un singola cella della riga, estesa per l'intera larghezza della riga, e in questa cella bisogna inserire un'immagine PNG con trasparenza ALPHA, con misure uguali o proporzionali a quelle del video utilizzat per lo sfondo... 
.. .ad esempio, il tuo attuale video è in rapporto (16:9), ed allora nella cella puoi utilizzare un'immagine PNG trasparente con misure e proporzioni congrue, ad esempio di 1600x900px o anche 800x450px (tutte le 16:9 vanno bene) ); 
... in questo modo il video di sfondo avrà aspetto razionale intero ... 
... (ovviamente se usi PNG con rapporti diversi, ad esempio (3: 2) otterrai diversi aspetti di ridimensionamento... 
... per capire, e per fare un rapido test, puoi scaricare con il tasto destro del mouse e utilizzare questa mia stessa immagine che vedi qui; ...e in allegato ▼▼ sotto a questa troverai la stessa immagine, ma completamente trasparente...

▼▼

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore

Prima di tutto , grazie per la celer di risposta! grazie davvero per avermi dedicato il tuo tempo. Tra poco ritorno in ufficio e provo :)

Leggi di più
Postato il da Andrea Z.
Andrea Z.
Andrea Z.
User
Autore

Eccomi ! ho provato, la situazione e' che nell'anteprima del programma vedi il video, mentre nella realta cambiando anche browser non si vede il video

 ‪ KolAsim ‪ ‪
...se ti interessa l'aspetto razionale del video di sfondo, e se non devi utilizzare altri oggetti sovrapposti allo sfondo della riga, come mi pare che sia adesso, allora è molto semplice...  ...basta usare un singola cella della riga, estesa per l'intera larghezza della riga, e in questa cella bisogna inserire un'immagine PNG con trasparenza ALPHA, con misure uguali o proporzionali a quelle del video utilizzat per lo sfondo...  .. .ad esempio, il tuo attuale video è in rapporto (16:9), ed allora nella cella puoi utilizzare un'immagine PNG trasparente con misure e proporzioni congrue, ad esempio di 1600x900px o anche 800x450px (tutte le 16:9 vanno bene) );  ... in questo modo il video di sfondo avrà aspetto razionale intero ...  ... (ovviamente se usi PNG con rapporti diversi, ad esempio (3: 2) otterrai diversi aspetti di ridimensionamento...  ... per capire, e per fare un rapido test, puoi scaricare con il tasto destro del mouse e utilizzare questa mia stessa immagine che vedi qui; ...e in allegato ▼▼ sotto a questa troverai la stessa immagine, ma completamente trasparente... ▼▼
Leggi di più
Postato il da Andrea Z.
Andrea Z.
Andrea Z.
User
Autore

questo e' quello che vedo dall'anteprima

Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... in Anteprima il video/audio non funziona, fatto noto per Chromium, ...ma tu con la tua v.PRO puoi usare in Anteprima i browser alternativi che hai, e che puoi selezionare direttamente nel menu di Anteprima, in alto a destra...
...attenzione, per come ti avevo detto prima, non ci devono essere altri oggetti nella riga, che deve contenere una sola cella per il solo oggetto immagine per il mio file PNG; ...i due [Click me!] con devono stare nella riga del video...

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore

Nell'anteprima del programma ora la vedo bene ma nella realta' con iphone, cambiando anche diversi browser il video non si vede (come in allegato)

Ho provato sia con mp4 che ogg che webm ma nulla da fare...

Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non ho mai avuto di quei dispositivi i(!),  ma spesso se ne sente per vari problemi a loro circoscritti relativi ai browser di cui sono dotati...
... per evitare problemi di compatibilità, visto che il video non è di particolare importanza, ...potresti usare Elenco immagini  come sfondo della Riga...

... oppure provare con sfondo animato EXTRA tipo quello sugerito qui:  https://helpcenter.websitex5.com/it/post/237901

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore
 ‪ KolAsim ‪ ‪
... non ho mai avuto di quei dispositivi i(!),  ma spesso se ne sente per vari problemi a loro circoscritti relativi ai browser di cui sono dotati... ... per evitare problemi di compatibilità, visto che il video non è di particolare importanza, ...potresti usare Elenco immagini  come sfondo della Riga... ... oppure provare con sfondo animato EXTRA tipo quello sugerito qui:  https://helpcenter.websitex5.com/it/post/237901 .

Il cliente mi richiede quel video in quella posizione con una scritta e 2 pulsanti attivi sul video, ho provato diverse soluzioni ma non funzionano...

Non riesco ad avere una soluzione giusta per tutto...

Per es. ora il video che ho fatto in mp4 inserito in stile righe come video , si vede correttamente su iphone (safari e chrome) ma non si vede sul browser del pc... ne su edge ne su chrome.

Con altri programmi di creazione siti questo problema non l'ho riscontrato... avendo comprato diversi oggetti vorrei continuare ad usare w5.. ma sto arrivando alla frutta e sto perdendo un sacco di tempo...

Ti ringrazio personalmente :-)

Hai altri consigli?

Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non so cosa dirti sugli i(!)  e sugli altri browser in quanto problemi di compatibilità non dovrebbero essercene, ma non ho quelli che hai nominato; ...altri potrebbero dirti di più... 
... per me il cliente andrebbe guidato; ... ci sono strade diverse per ottenere risultati simili o accomodabili...
...!?... te la senti di provare un mio codice EXTRA per il pannello per Esperti, con un video già online e in tre formati diversi, per vedere se poi noterai differenze nei tuoi dispositivi...?...
... se ti interessa e se te la senti, ...avvisami, ...altrimenti ignora questa parte...

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore
 ‪ KolAsim ‪ ‪
... non so cosa dirti sugli i(!)  e sugli altri browser in quanto problemi di compatibilità non dovrebbero essercene, ma non ho quelli che hai nominato; ...altri potrebbero dirti di più...  ... per me il cliente andrebbe guidato; ... ci sono strade diverse per ottenere risultati simili o accomodabili... ...!?... te la senti di provare un mio codice EXTRA per il pannello per Esperti, con un video già online e in tre formati diversi, per vedere se poi noterai differenze nei tuoi dispositivi...?... ... se ti interessa e se te la senti, ...avvisami, ...altrimenti ignora questa parte... ciao .

Certamente!

Grazie

Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...OK ... basato sulla tua situazione attualmente online; ...copia ed incolla il mio codice in questa sezione:

>> Passo 3 - Mappa > Finestra Proprietà Pagina > Sezione Esperto > ▪Codice personalizzato: > (3^opzione) - Prima della chiusura del tag HEAD

.......................................................

<script>
$( document ).ready(function() {// K>
videoK= '<video id="imPageRowGraphicsVideo_1" class="imPageRowGraphicsVideo" autoplay="" loop="" playsinline=""><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>';
$("#imPageRowGraphicsVideo_1_wrapper").html(videoK);//K1>|<<;
var promise = document.querySelector('#imPageRowGraphicsVideo_1').play();
if (promise !== undefined) {
promise.then(_ => {
$('#imPageRowGraphicsVideo_1').prop('muted', false);
}).catch (error => {
$('#imPageRowGraphicsVideo_1').prop('muted', true);
});
}
} );//K<<;
</script>

......................................

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore

Buongiorno ho eseguito quanto suggerito, diciamo che sullo smartphone con safari e' ok, mentre con chrome rimane bloccato, per il pc, a parte la qualita' del video e' ok.

Ora cosa dovrei fare?

 ‪ KolAsim ‪ ‪
...OK ... basato sulla tua situazione attualmente online; ...copia ed incolla il mio codice in questa sezione: >> Passo 3 - Mappa > Finestra Proprietà Pagina > Sezione Esperto > ▪Codice personalizzato: > (3^opzione) - Prima della chiusura del tag HEAD ....................................................... <script> $( document ).ready(function() {// K> videoK= '<video id="imPageRowGraphicsVideo_1" class="imPageRowGraphicsVideo" autoplay="" loop="" playsinline=""><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>'; $("#imPageRowGraphicsVideo_1_wrapper").html(videoK);//K1>|<<; var promise = document.querySelector('#imPageRowGraphicsVideo_1').play(); if (promise !== undefined) { promise.then(_ => { $('#imPageRowGraphicsVideo_1').prop('muted', false); }).catch (error => { $('#imPageRowGraphicsVideo_1').prop('muted', true); }); } } );//K<<; </script> ...................................... .
Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Andrea Z.
... ... ... mentre con chrome rimane bloccato, ... ... ...

...!... purtroppo non posso verificare...!...

... in alternativa e per provare,  sostituisci il precedente codice con questo parzialmente diverso, che avevo suggerito in qualche forum, En o De, e pareva avesse funzionato:

<script>
$( document ).ready(function() {// K>
videoK= '<video id="videoK" style="position:relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;" autoplay="" loop="" playsinline=""><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>';
$("#imPageRow_1").html(videoK);//K1>|<<;
var promise = document.querySelector('#videoK').play();
if (promise !== undefined) {
promise.then(_ => {
$('#videoK').prop('muted', false);
}).catch (error => {
$('#videoK').prop('muted', true);
});
}
} );//K<<
</script>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andrea Z.
Andrea Z.
User
Autore

Prima di tutto veramante grazie per la tua disponibilita' :-)

Allora su chrome il video rimane bloccato..

Detto questo il passo successivo quale sarebbe?
Creare una pagina con i 3 video e 3 formati e cambiare il link?

Cosi pero' il sito diventa pesante...

Esiste un codice dove il video inserito in stile riga diventi realmente responsive?

 ‪ KolAsim ‪ ‪
Andrea Z. ... ... ... mentre con chrome rimane bloccato, ... ... ... ...!... purtroppo non posso verificare...!... ... in alternativa e per provare,  sostituisci il precedente codice con questo parzialmente diverso, che avevo suggerito in qualche forum, En o De, e pareva avesse funzionato: <script> $( document ).ready(function() {// K> videoK= '<video id="videoK" style="position:relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;" autoplay="" loop="" playsinline=""><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> <source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video>'; $("#imPageRow_1").html(videoK);//K1>|<<; var promise = document.querySelector('#videoK').play(); if (promise !== undefined) { promise.then(_ => { $('#videoK').prop('muted', false); }).catch (error => { $('#videoK').prop('muted', true); }); } } );//K<< </script> .
Leggi di più
Postato il da Andrea Z.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Andrea Z.
... ... ... ...  Allora su chrome il video rimane bloccato.. ... ... ... ... ...  Esiste un codice dove il video inserito in stile riga diventi realmente responsive?  ‪

... mi dispiace, non posso verificare, purtroppo sono su un PC vecchio (M$Vista) e senza programmafoot-in-mouth, altrimenti avrei cercato escamotages più validi...
.. comunque, tanto per capire, il video come sfondo della riga è già in responsive, ma ovviamente in modalità CSS COVER, che vuol dire che se la finestra è sviluppo orizzontale vengono tagliate le parti superiori ed inferiori, ed invece se la finestra è a sviluppo verticale vengono tagliate le parti laterali, ma in ambedue i casi la zona centrale sarà sempre al CENTRO della finestra...
... detto questo, per ridurre il video di sfondo riga da CSS COVER in modalità razionale a tutta luce, ...vale quanto detto con il mio escamotage iniziale, con il metodo con immagine PNG...
... adesso, visto che le stai provando tutte ed hai pazienza per farlo, ti suggerisco di fare questa semplicissima ed immediata prova interna al programma senza codici extra, e consiste nel:
1) ... non usare il video come sfondo della riga;
2) ... nella riga metti un'unica cella estesa per tutta la larghezza della riga e della pagina...
... prova e fai sapere del risultato che otterrai, che potrebbe essere molto valido, e senza strafare, speriamo...
.............................................................
... poi ti anticipo, sempre se tu vorrai, in seguito potrei proporti un altro mio esclusivo escamotage, EXTRA, basato su DIV_CUSTOM+IFRAME+TUBULAR per VIDEO_YT su YouTube, quindi leggero sia per il sito che per la pagina stessa, ma se del caso se ne parlerà per ultimo...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪