Ridimensionare video nello stile righe 
Autor: Alberto B.
Visitado 964,
Seguidores 2,
Compartilhado 0
Ciao a tutti
In questo sito di prova vorrei poter "ridimensionare" il video inserito nello "stile righe" poichè stringendo il browser (tipo smartphone) si vede solo una fettina, mentre se viene inserito come oggetto video la vista è completa anche su smartphone, di seguito gli esempi:
-> (video in stile righe) qui
-> (video inserito come oggetto) qui
Publicado em
... senza dover ricorrere ai miei codici, storici anche quelli, ... si può risolvere semplicemente con la mia prima invenzione fatta anni fa per la v.12, "L'uovo di Colombo", alla portata di TUTTI...
... devi mettere nella riga un unico oggetto "Oggetto Immagine" con trasparenza sul canale ALPHA "0", completamente trasparente, (o contenente un testo grafico trasparente), esteso per tutta la larghezza; ...immagine con rapporto razionale congruo con quello del video, nel tuo caso video in (16:9)...
... puoi fare una prova istantanea con la mia immagine che vedi qui...
... pensando che tu hai il quid+, il resto lo capirai immediatamente da te...
.
... precedente immagine anche qui in allegato...
.
Autor
Si effettivamente funziona bene, (un po meno se si usa la funzione Full Height di website).
però è una buona soluzione, ho già testo on-line.
... quello è un altro discorso, e lì entrano in gioco i rapporti razionali sulla base della modalità CSS-COVER (Centro/centro) sulla priorità altezza/larghezza della finestra...
.
... ho rivisto il tuo esempio adesso, ottimo...
... se hai un esempio FullHeight magari si potrebbe fare una valutazione...
.
Ok va benissimo l'esempio ma presenta qualke problema che io non sottovaluterei Kolasim:
Infatti L'immagine di sfondo è in trasparenza. Di solito io utilizzo un 16:9. Ovviamente il tuo suggerimento funge da vettore per il responsive e va bene ma.....
1- Il tempo di latenza del video - in questo caso - è troppo alto sicchè l'utente vede all'inizio solo una riga bianca o nera a secondo dello sfondo utilizzato nel progetto e lo vede per il tempo in cui il video si sta caricando. Ancora peggio se c'è l'audio che parte all'improvviso. Non è un bel biglietto da visita specialmente se l'utente si trova in quel momento con il suo cellulare in UMTS o peggio in edge3.
Come risolvere? Semprechè si abbia voglia di farlo? Molto semplice!
1 Elaborare il video afinchè abbia una minore pesantezza comprimendolo attraverso vari tool presenti sulla rete cercando un compromesso tra velocità e grafica accettabile
2 Nelle opzioni a cascata VIDEO impostare una sua immagine non pesante anzi il più leggera possibile
3 Oppure fa uno stamp di una sequenza del suo video e la salva in JPG mettendola poi come immagine di copertina. Si perde un po di tempo ma i risultati sono più che soddisfacenti.
... al tempo, ...non ce n'è bisogno dell'esempio, ho capito cosa intendi per FullHeight...
...il risultato è normale, ... praticamente tutto sta nelle mie precedenti immagini sulla modalità COVER...
... se tu metti davanti al televisore una cornice vuota di un quadro verticale alta quanto il monitor, ma più stretta del monitor, capirai da te, l'interno della cornice è quello che vedrai del video in finestre ristrette...
...quindi, se ciò che conta nel video, testo e/o altro di animato, sta nella parte centrale il ridimensionamento risulterà accettabile...
... il video quadrato (1:1) è quello che si adatterebbe meglio in tutte le risoluzioni...
(... oppure, se proprio ci tieni, come ho suggerito ad alcuni che lo hanno applicato più che altro sullo slidehow, ... puoi realizzare un video ad hoc per le risoluzioni verticali-smartphone, e sostituirlo automaticamente con codice EXTRA...)
.
Autor
Si ok, stò facendo delle altre prove, tra un po pubblico e vediamo di fare il punto con le vostre considerazioni...
Autor
Ecco volevo realizzare una riproduzione video simile a questo sito web qui, dove il video è sull'header in alto sotto il menu.
In parte ci sono riuscito e l'ho reso visibile qui, (la visualizzazione è visibile da 1280 pixel in su), però i problemi sono 2:
- il video fa un ciclo solo si ferma ed attende un play...
- ingrandendo tanto il browser (oltre i 1920 di larghezza) si vedono le righe dai lati…
Poi su quanto riferito da Roberto sono d'accordo il video finale sarà più leggero, ma per quanto riguarda la soluzione di KOL (con l'immagine trasparente per capirci) mi sembra che funzioni bene, vedere qui a metà pagina circa.
... se vuoi risolvere il solo loop, ... usa questo mio codice:
<script>
$(document).ready(function(){//K>;
/** -- aggiunge loop video in header by KolAsim -- **/
$("#imHeader video").attr("loop",true)
});//K<<;
</script>
... se invece vuoi superare il limite dei 1920 pixel il mio codice non serve, ed allora usa semplicemente "L'uovo di Colombo" precedente, eccezionale, ...magari aggiungendo un margine superiore negativo per compensare l'header...
.
.
Il video si chiama Blue demo.mp4 e pesa 44mega e passa. E' troppo pesante! Funziona bene al PC sui cellulari si pianta.
Il tuo video portato a 3,7MB e pesa ancora troppo per i miei gusti. Senza alcun codice in loop continuo. ESEMPIO
molto meglio il video alleggerito di Roberto, si vede subito appena si giunge sulla sua pagina. Mentre sull prova fatta da Alberto B., si vede per almeno 40-50 secondi questa finestra con questa immagine fissa
Autor
Effettivamente il video è pesante, forse sono stato poco chiaro nella richiesta, si tratta di una serie di prove per vedere l'effetto migliore, il video è uno casuale che avevo nella cartella del server non sarà quello definitivo...
- Per Giuseppe - da quando abbiamo installato Starlink funziona tutto a manetta, non me ne sono neanche accorto del ritardo, proverò a casa dove ho poca rete
- Per Roberto - grazie dell'esempio, ma funziona come quello pubblicato nella mia pagina download con il metodo "kol" con l'immagine trasparente (non il video nell'intestazione, ma quello più in basso sulla pagina) anche a me funziona in loop senza codice... Il problema si verifica solo sull'intestazione
- Per Kol - ok il codice funziona lo puoi verificare anche tu, per le dimensioni maggiori è un problema (non capisco come hanno fatto quelli del sito "solari" forse hanno messo un breackpoint più alto), e poi non posso usare "l'uovo" perche nell'header posso inserire solo un oggetto, non ho lo "stile righe". . .
E qual'è il problema ? Si fa ugualmente anche sull'intestazione ma si deve lavorare in altra maniera - ESEMPIO
Autor
Proprio così !
Però adesso devi darmi delle dritte, perchè non sono molto pratico di codici e script...
Non serve io lo vedo già funzionante come lo vuoi te. Clicando sui due link io vedo normalmente il video in loop. Probabilmente sei già intervenuto?
Autor
si per quello sull'header si, ho messo il codice di KOL
volevo solo risolvere il problema della risoluzione oltre i 1920...
Alberto, infatti anche dal mio screenshot di ieri sera tardi si evince che il video ha il menù in sovrimpressione su di esso, quindi hai già ottenuto quello che volevi, sempre se non abbiamo capito male
Autor
si oggi ho ripubblicato e corretto, come ripeto se tiri in larghezza il browser si vedono delle righe ai lati...
Certo, è normale, si vedono i lati non coperti dal video su schermi con risoluzione superiore ai 1920px di larghezza perchè il video ha misure 1920x1080 px e non puoi coprire uno schermo più grande di 1920 tranne se non usi un video che abbia una larghezza molto maggiore (ma poi ti aumenta a dismisura anche l'altezza, devi considerare questo)
Ok Giuseppe ma con del codice potrebbe risolvere secondo me. Se lui vuole un video che si veda bene ovunque, la scelta migliore è un video realizzato a 1920x1080 con object-fit: cover in CSS del tipo:
<style>
.video-slider video {
width: 100%;
height: auto;
object-fit: cover;
}
</style>
Quello della banda degli smanettoni da me postato lo vedi tranquillamente anche su smart tv
.content-slider.slide-image-content {
object-fit: cover; /* Copertura completa */
Per farti un esempio ma applicato a un content slider che è tutta un'altra cosa.
E' l'oggetto immagine che limita la larghezza. Se lui utilizzasse un content slider non avrebbe....per esperienza..... questo problema. Altrimenti deve provare con immagini in png più grandi tipo 3840x2160 o ridurla a 3840x860 . Deve fare delle prove.
Autor
IN effetti dopo che ho visto questo e quello dei smanettoni vorrei fare una prova anche sul mio !
... rimanendo al passo ... ... ...
NOTA: .. nel sito "Solari", il video di sfondo funziona allo stesso modo del video di sfondo delle righe del nostro programma, né più né meno, in COVER e SENZA adattamento razionale, che questo aspetto era quello che avevi richiesto tu che puoi ottenere con la mia invenzione con "L'uovo di Colombo"...
.. fermo restando la tua richiesta iniziale, per avere il video a tutta larghezza, e mantenere sempre l'aspetto razionale visibile solo sino ad un certo breakpoint, nel tuo caso 1280, ... devi procedere in modo semplice passo-passo, così:
1) - NON usare il video in HEADER;
2) - ridurre l'Altezza di HEADER quanto basta per contenere il MENU esteso che per il tuo attuale MENU è di 40 pixel e può andar bene così;
3) - usa la PRIMA RIGA per contenere il VIDEO come SFONDO della RIGA estesa;
4) - nella CELLA unica della riga metti il mio metodo con "L'uovo di Colombo" esteso. ovvero l'immagine trasparente in PNG (!6:9), che per estendersi in modo razionale oltre i 1920px, per esempio sino a 2540px di larghezza finestra deve essere di misura 2540x1440 (16:9); questo fattore lo puoi valutare tu; ...io per agevolarti nelle prove ti ho allegato la mia immagine già pronta (2540x1440);
5) - a tua preferenza, come avevi già fatto, puoi impostare la riga NASCOSTA sotto il PRIMO breakpoint (1280)...
6) - nel pannello "codice" della stessa riga puoi mettere il codice CSS per compensare lo spessore di HEADER.;
7) ...!... FATTO ...!...
8) ... in più, volendo, ...si potrebbe integrare uno dei miei preload sullo sfondo del video per ingannare l'eventuale prolungata attesa, ma questo sarebbe un altro discorso a parte...
...............
... come potrai constatare da te provando è più semplice e veloce a farsi che a dirsi,, come da miei precedenti suggerimenti
....
... con questo procedimento detto ottieni il video sempre (*) in ridimensionamento razionale sino alla risoluzione di 2540px, ed oltre a questo valore il normale ridimensionamento COVER, (inavvertibile)
(*) - x "sempre" nel tuo caso sta tra 1280 e 2540 pixel...
....
.
... mi ero dimenticato di allegare la nuova immagine, questa che si vede qui ed anche in allegato:
+ mia nota personale: ... ... a parte della ottimizzazione del video su cui mi pare che non avresti problemi a farlo e che non era il Tema del Post, ...in più mi sento di consigliarti, di usare possibilemte il video di sfondo riversato su YouTube...
... con video su YouTube avresti dei vantaggi importanti non trascurabili, sempre se vorresti farlo o provarlo...
... il vantaggio più importante è la banda passante del tuo server sempre libera anche con più visitatori contemporanei del tuo sito, cosa che non si ha con video sul proprio server se per caso i visitatori del tuo sito fossero contemporaneamente più di uno, ed in certi casi si arriverebbe all'inceppamento o paralisi del tuo sito nel browser del visitatore...
... altro vantaggio è la disponibilità del flusso quasi immediato, cosa che non avviene in alcuni browser con video su server che avviano il flusso video a download completato...
.
ciao
.
Autor
Ok bene i consigli "YouTube" per evitare l'intasamento
Domani proveró le tue indicazioni e/o quelle di Roberto, ma nel punto 3 della tua descrizione, se agisco così il menu non stará sovrapposto al video come si vede ora, ma 50 px più in alto del video, o sbaglio !
... se proprio si vuole sottostare al menu in trasparenza, la risposta è nel .6):
> « 6) - nel pannello "codice" della stessa riga puoi mettere il codice CSS per compensare lo spessore di HEADER.;»
... praticamente per la prima riga del mio metodo descritto si tratterebbe di icollare questa stringa:
#imPageRow_1{margin-top:-40px !important}
.
... lo stesso identico procedimento è valido per lo slideshow di sfondo con immagini della riga, che invece cambierebbe con il ContentSlider, tutto un altro ed esclusivo discorso...
...
.
Autor
Bene, dopo tutti i vs. consigli sono arrivato ad un buon punto.
con l'aggiunta di: #imPageRow_1{margin-top:-40px !important} + uovo colombo di kOL, ho il risultato ottimale
vedere qui
-> per Roberto, se mi dai il codice "object-fit: cover" e dove inserirlo, provo anche il modo da te indicato e termino di fare tutti le prove del caso…
-> per Kol, ho provato ad inserire il video da youtube in stile righe ma non riesco a visualizzarlo, vedo solo la copertina...
Autor
Correggo l'ultimo post, funziona anche con il video caricato da Youtube !
Cambia tutta la struttura del layout e annesi breack-point essendo operante su oggetto content slider con mediaquery specifiche per risoluzione quindi, secondo me, non vale la pena starci a lavorare perchè va già bene il risultato che hai ottenuto.
Autor
Si penso che lascerò così, il risultato è buono
...purtroppo non mi va nè con youtube nè con vimeo
In che senso non va? Non funziona,non parte,non ti fa vedere neanche l'immagine "premiere"? Poterebbe essere possibile che il percorso sia sbagliato? La butto la. IO ho provato con le tue stese impostazioni con un mio video e funziona regolarmente.
Autor
Ma... ho semplicemente sostituito il link su website e messo questo (youtube) e poi questo (vimeo) ma non vedo nè l'anteprima e neanche sul web, ora provo a controllare meglio ma mi sembra strano....
Il video ho provato ora ha delle restrizioni e non è disponibile.Se tu provi un qualsiasi video senza restrizioni funziona regolarmente. In parole semplice neanche a me va ma mettendone uno senza troppi fronzoli funziona.
Il video in questione è stato fatto da te? O l'hai preso da qualche parte?
Autor
Il video è nostro, ma strano i link si vedono tranquillamente... ora controllo ma sicuramente è a causa di restrizioni come dici tu...
Abbiamo l'abbonamento su Vimeo, ora provo un'altro
... da parte mia per poter valutare dovresti postarmi il LINK della relativa prova online preferibilmente con YT...
... invece ricontrollando il tuo precedente LINK > /lang6/index.html (z prova 2) ... non contiene video, (nè altro tipo di sfondo)...
.
Autor
ma... strano ho fatto semplicemente questo:
Autor
ok con i nostri video non ne vuole sapere di funzionare
ho messo uno qualsiasi ed ecco il risultato qui
Accertati di non avere restrizioni sul canale Youtube relative all'incorporamento dei video su siti/piattaforme esterni e accertati che sullo specifico video hai optato per una delle due scelte relative alla visualizzazione per i bambini (scegli o la prima o la seconda, ma se non lo fai, il video resta come in "standby" da quel che mi è sembrato di capire, vedi screenshot sotto. Io ho scelto la seconda):
... Poi verifica anche che sia consentito l'incorporamento dei video su altri siti, sempre in Dettagli del video scorri fino in basso e clicca su pulsante "Mostra Altro" con sotto il testo in piccolo "Promozioni a pagamento, tag, sottotitoli e altro", poi scorri un bel po' fino a trovare la voce "Licenza" e sotto Licenza si può mettere la spunta alla casellina "Consenti incorporamento". Ti allego anche screenshot con le voci evidenziate in giallo...
Autor
si sicuramente farò altre prove, anche con vimeo visto che abbiamo un'area a pagamento con tutti i nostri video incorporati in vari siti d'Europa senza problemi ...
... il tuo video su YT per me rende molto bene, considerando il formato sulla risoluzione...
2) - se ti interessa utilizzare il TUO video su YouTube, che attualmente mi pare che non ti funziona come sfondo della riga per un qualche motivo, sarebbe sempre possibile poterlo usare con il mio codice EXTRA, sempre in aspetto ratio come da UOVO! e relative mie considerazioni, ...ed il risultato sarebbe ottimo prendendo spunto dalla mia invenzione che si trova qui:
> https://helpcenter.websitex5.com/pt/post/223476
3) - oppure un'altra alternativa bella e semplicissima a saperla, con video YT-TUBULAR (suggerito diverse volte nel Forum), forse la mia prima invenzione in assoluto per lo sfondo delle righe con video YT da 15 anni fa, cioè da quando lo avevo suggerito con IFRAME a quei tempo "deprecato"(!)...
... in questo caso, per farla semplice, basterebbe creare la pagina HTML custom(*) extra dal programma, contenente il video YT-TUBULAR, ...quindi iniettare nella riga di sfondo il codice IFRAME per importare la pagina YT-TUBULAR...
(*) - volendo si potrebbe usare una pagina nascosta del progetto, ma personalmente lo eviterei, potendo cosi sostituire il video quando si vuole per ogni occasione in modo leggero e veloce senza usare il Programma...
.
ciao
.
Autor
Ok KOL ma ora mi stai consigliando modifiche troppo complesse per la mia esperienza, il codice che mi hai inviato per il "loop" e per "imPageRow" funzionano benissimo con il video in locale.
Sono un p'ò allergico a youtube e il suo modo di gestire i file pubblici, ho scelto di utilizzare la piattaforma a pagamento Vimeo da anni, ma secondo me cè un problema con website perchè come vedete dall'immagine, si carica regolarmente il file, me lo fa vedere in anteprima, ma poi non lo pubblica ...
... fermo restando l'oggetto della tua domanda, ... non penso che tu non ne sia all'altezza...
... ovviamente occorre un minimo di bagaglio appresso per capire di quel che si fa e del perchè, ...minimale rispetto alla complessità del tuo sito che dimostra che sei già in posizione avanzata, e per me sei in possesso di quel savoir faire che serve...
... i mie suggerimenti non sono mai aleatori e quasi sempre basilari, come hai potuto constatare da te con "l'uovo di Colombo" (e altro), sotto gli occhi di tutti ma non visto da nessuno, come uno stereogramma...
... per le mie soluzioni con aggiunta del mio codice EXTRA quando necessario, sempre esclusivo e libero, l'unica azione richiesta è un copia/incolla, ed ottemperare passo-passo alle istruzioni, sempre elementari...
.
++ ... ... quello che posso dirti adesso per arrivare ad una conclusione sulla tua domanda, sarebbe quella di non distrarti e deciderti su quale soluzione seguire, tutte semplici con più o meno passaggi...
... ti ripropongo lo schema su cui scegliere per provare, che alla fin fine ti stupiranno, garantito:
1) - il tuo video sul server che hai già provato; ... scartando questo rimangono i punti 2) e 3);
2) - il tuo video su YouTube (per me da preferire) che funziona bene con il mio semplice codice anticipato prima;
3) - il tuo video su YouTube (per me da preferire) che funziona bene con il mio semplice metodo YT-TUBULAR-IFRAME, quello che preferisco in assoluto, leggermente più macchinoso per il semplice fatto che si deve creare la pagina custom-TUBULAR, ... ma poi neanche complicato più di tanto, in quanto detta pagina te la preparerei io, e che potrai personalizzare in futuro con altri video senza toccare il Programma evitando pesanti esportazioni;
... anche alla base dei punti 2) e 3) ...ci sta sempre "L'uovo di Colombo"...
... se scegli, mi segui, e stai al tempo, ne rimarrai sicuramente soddisfatto...
... nel caso, quando e se vorrai, ritornerò qui o in un nuovo Argomento...
.
ciao
.
Autor
Ciao, sono d'accordo con le tue considerazioni, quindi visto che sono in vena di esperimenti è il caso di provare anche il metodo "TUBOLAR", faccio un riassunto della situazione attuale:
- con youtube (che mi piace poco) qui
- in locale (che mi piace molto) qui
- con Vimeo (visto che tutti i nostri video sono li) non funziona penso per un problema WebSite !
... al tuo tuo video YT forse hai cambiato qualche impostazione rispetto ad ieri, quando mi funzionava correttamente...
... attualmente non è disponibile neanche con il codice iframe di condivisione proposto da yt stesso...
... questo è il messaggio rilasciato a video:
Video non disponibile
La riproduzione su altri siti web è stata disattivata dal proprietario del video
Guarda su YouTube
.
... comunque il tuo esempio con video locale è perfetto...
.
Autor
Ok con le impostazioni di YT non vado d'accordo ultimamente, devo rivedere con più calma...
Attendo lo STAFF per il problema del caricamento dei video con VIMEO....
... ho attivato l'attenzione per lo STAFF per questa tua richiesta...
... intanto per portari avanti posta il LINK VIMEO in modo che lo STAFF possa verificare...
... se non entro oggi, si andrà a lunedì...
.
Buongiorno Alberto,
resto in attesa di un link per il video di Vimeo, così da verificarne il comportamento.
Grazie.
Se il video non è disponibile avrai disattivato l'incorporamento del video (embedding) in altri siti web. Ti avevo spiegato cosa dovevi controllare sui tuoi video, ho fatto anche degli screenshot ma non hai fatto sapere più nulla se era tutto ok sulle impostazioni che ti ho indicato.
Autor
Buongiorno Eric semplicemente il software non aggiunge nulla, comunque inserisco un link qui (non si vede nulla) mentre con impostazione locale si vede qui
Il video inserito sull'oggetto video dell' header è questo: https://vimeo.com/1067697992
Autor
si scusami, ho controllato le impostazioni di youtube come hai detto tu, per un giorno ha funzionato, adesso va così e come ho scritto ricontrollerò
il problema è website-vimeo come ho scritto ad Eric, ho diversi video incorporati, anche in altri dominii e funzionano da anni, se provi questo vedrai che funziona regolarmente https://vimeo.com/1067697992
... per YT, come dice l'avviso che ti ho anche riportato prima, risulta che la condivisione l'hai tolta tu o chi autorizzato poteva farlo
.
.
Autor
ciao KOL Per YT sto controllando le impostazioni prima o poi ne vengo a capo, ma penso che non inserirò il video pubblicato su YT nell'intestazione del sito web, visto che siamo abbonati alla piattaforma Vimeo non vedo perchè non usarla.
Autor
Per Eric - su questa pagina è pubblicato il video in almeno 3 modi diversi come si vede dall'immagine di W.S., però una volta pubblicata non si vede nulla.
Gli stessi codici embedded sono pubblicati qui e si vedono tutti i video... (la pubblicazione è stata fatta con la ver. 2023.3)
Autor
...scusami Eric, ho sbagliato percorso effettivamente i video vengono pubblicati regolarmente nella pagina vedere qui, mentre l'errore rimane quando si inserisce il video con "vimeo" nell'intestazione !!!
... personalmente preferrei YT, (specialmente YT+TUBULAR), ... ma la soluzione ci sarebbe anche per vimeo...
... i tuoi video VIMEO non sono video normali CONDIVISIBILI, ma RISERVATI al proprietario con licenza per poter essere incorporati esclusivamente nel TUO SITO (oppure poter essere visti SOLO su vimeo), ...in base alle impostazioni che hai adottato su vimeo...
.
... + + ... ... mie considerazioni personali sulla situazione attuale...
- hai tolto l'opzione di nascondere la riga-video sotto a 1280px, ...OK...
- l'UOVO non è più a 2560px ma a 1920px; ...OK... ... ma questo vorrà dire che a 1920 si passerà da RATIO a COVER, sempre OK...
...
... riguardo a questo tuo video VIMEO: https://vimeo.com/1067697992
... ora come ora, se vuoi usare il tuo VIDEO VIMEO, come soluzione RAPIDA, ... per il momento vedo solo la mia soluzione con mio esclusivo codice EXTRA...
... se tu sei interessato a provare, ...avvisami, ...ma nel contempo nel tuo esempio "lang6" elimina il video YT di sfondo della riga1, non usare-cambiare altre opzioni, e lascia l'UOVO attuale come e dove sta adesso...
... se farai ciò tornerò qui per l'ultimo colpo, immediato, con successo garantito per lo scopo in oggetto su cui si basa il mio focus...
.
ciao
.
Autor
Si ciao KOL, disponibile come sempre...
Sto facendo continuamente prove e cambiamenti ecco perchè trovi "l'uovo" cambiato oppure manca il codice, in ogni caso userò le tue indicazioni sul sito definitivo.
Se leggi le indicazioni che ho scritto ad ERIC i nostri video sono impostati correttamente infatti si vedono tranquillamente qui
L'unico posto purtroppo è l'intestazione!!! se vuoi suggerirmi un codice alternativo per vedere l'effetto ok grazie, ma penso che lo STAFF prima o dopo risolverà...
Autor
qui la prova con vimeo (con uovo di colombo in 4k + codice tuo per il margine)
qui la prova con YT (che non userò)
qui la prova con il video collegato direttamente (pesante ma con l'effetto desiderato)
Autor
scusami
qui la prova con il video collegato direttamente (pesante ma con l'effetto desiderato)
... lang7 ... ...!... c'è l'UOVO, ...ma non c'è il video VIMEO nello sfondo della riga1, VUOTO...!...
.
... lang6 ... ...OK(!)... ... soluzione immediata con aggiunta di questo mio codice EXTRA sempre per > Esperto | /HEAD:
<script>
$(document).ready(function () {//K>;
/** -- autoplay video YT x sfondo riga x WSx5 by KolAsim --**/
setTimeout(function(){//K1>;
srcK =$("#imPageRowGraphicsVideo_1").attr("src");
$("#imPageRowGraphicsVideo_1").attr("src",srcK + "&mute=true");
}, 1000);//K1<<;
});//K<<;
</script>
.
Autor
... si infatti è un problema di W.S. che non mette il codice, ma nel software cè e si vede l'anteprima...
... OK x VM ... ... hai provato lang6 pe YT ...?...
Autor
si è on-line !
... per il video VIMEO, ...in attesa di eventuale FIX, ...fermo restando la situazione attuale in >lang7, ... risolvi immediatamente con il tuo video vimeo con questo mio codice:
<script>
$(document).ready(function () { //K>;
/** -- autoplay video Vimeo x sfondo riga x WSx5 by KolAsim --**/
idvimeoK = "1067697992";
setTimeout(function(){ //K1>;
vimeoK = '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/'+idvimeoK+'?badge=0&autopause=0&&autoplay=true&loop=true&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="BlueForce Smart Pro" alt="BlueForce Smart Pro" data-ready="true"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div>';
$("#imPageRow_1").append(vimeoK)
}, 1000);//K1<<;
}); //K<<;
</script>
.
... lang6 ... OK ... perfetto ...
.
Autor
eccomi quà
ho ripubblicato con #imPageRow_1{margin-top:-120px !important}
e ho fatto sparire la riga nera in alto
Autor
confermo le modifiche:
qui la prova con vimeo (con codice suggerito)
qui la prova con YT (con margin-top -120)
... a questo stile accoppia anche la cella dell'immagine (UOVO): #imCell_24
... -120px mi sembrano troppi; ...l'HEADER è di 60px...
.. prova così:
#imPageRow_1, #imCell_24 {margin-top:-60px!important}
.
Autor
si è un pò troppo -120, ma con questo codice #imObjectImage_24 {}#imPageRow_1{margin-top:-120px !important} mi taglia i simboli in alto, quando ricomincia il ciclo non si vedono le scritte di YT.
...!... per lang7-vimeo hai inserito il codice in scheda di stile CSS, penso la stessa che hai usato per il margine, posizione errata, non compatibile con gli SCRIPT...!...
... se il codice lang7-vimeo ti serve solo per la INDEX, hai due possibilità per inserire lo SCRIPT EXTRA:
1) - la prima possibilità sta in Proprietà della Pagina | Esperto | Codice | Prima della chiusura del tag /HEAD; ... e qui incollare il precedente codice SCRIPT;
2) - la seconda possibilità, inserire nella stessa pagina un OggettoCodiceHTML, anche di un solo Pixel in modo che sia invisibile e non dia fastidio al layout, ed in questa scheda incollare il precedente codice SCRIPT...
.
... non -120px, ma -60px
Autor
perl lang6 (YT) corretto a -60px
Per lang7 (vimeo) ho inserito ma si vede il codice in alto...!!?
... lang6 ...mi sembra perfetto... ... OK ...
...
... per lang7 sostituisci il precedente codice con questo, ove in questo ho esternato la libreria JS di vimeo:
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(document).ready(function () { //K>;
/** -- autoplay video Vimeo x sfondo riga x WSx5 by KolAsim --**/
idvimeoK = "1067697992";
setTimeout(function(){ //K1>;
vimeoK = '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/'+idvimeoK+'?badge=0&autopause=0&autoplay=true&loop=true&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="BlueForce Smart Pro" alt="BlueForce Smart Pro" data-ready="true"></iframe></div>';
$("#imPageRow_1").append(vimeoK)
}, 1000);//K1<<;
}); //K<<;
</script>
.
Autor
Si effettivamente ora comincia a funzionare qualcosa, non parte
ma almeno esiste !!!
...
... strano, .. a me funziona su ege e firefox, ma non su chrome ...!...
... ma...!... ... forse ho capito di cosa si tratta,... in pratica si deve applicare in aggiunta lo stesso mio codice usato per YT, che per VM diventerebbe questo:
<script>
$(document).ready(function () {//K>;
/** -- integrazione autoplay x video Vimeo x sfondo riga x WSx5 by KolAsim --**/
setTimeout(function(){//K1>;
srcK =$("#imPageRow_1 iframe").attr("src");
$("#imPageRow_1 iframe").attr("src",srcK + "&mute=true");
}, 2000);//K1<<;
});//K<<;
</script>
... prova e fai sapere del risultato, ... sperando in bene...
.
Autor
si effettivamente ora funziona con Chorme e con Safari (no con Edge)
... piccolo particolare quando si punta il mouse sul menu in alto, compare il tasto "pausa" al centro....
... OK ... sul mio edge funziona...
...!... ma, hai messo un doppio codice in più, quello di YT, probabilmente contrastante; ...dei due per vimeo devi usare l'ultimo postato poco fa qui...
... eventualmente prova a portare il ritardo da 2000 attuali, a 3000 ... un secondo in più...
... il simolo pausa è quello del player VM, si vede per poco e non da fastidio...
.
Buongiorno,
effettuando prove di inserimento analoghe alle tue, già nel contenuto della pagina il video non mi risulta visibile, con questo avviso, forse c'è qualche restrizione specifica?
Autor
E' normale Eric, in anteprima si vede quel "sorry..." ma dopo l'esportazione si vede effettivamente
Il problema è proprio questo l'anteprima indica che è stato caricato, ma poi in esportazione W.S. non inserisce alcun codice di riferimento di vimeo... questo succede solo sull'header, mentre all'interno di una pagina come oggetto funziona benissimo.
Autor
fatto ma mi sembra che non si veda piu....
... penso di sì, io avevo rilevato quanto detto al Post61:
... quindi secondo me questi suoi video vimeo non possono funzionare su piattaforme terze...
...
ciao
.
... hai tolto il codice base, quello importante(!) del >Post81, ed invece devi togliere quello riferito a YT:
.
Autor
.... mi sono perso comunque ora ho inserito il codice più lungo sulla pagina index e quello più corto (integrazione) sul punto 1 impostazioni codice
Autor
Scusami Eric ma avevo già scritto che non ci sono problemi di pubblicazione con W.S. infatti su questa pagina sono pubblicati i video in almeno 3 modi diversi come si vede dall'immagine...
Non si spiega perchè non debba essere pubblicato come sfondo della riga ...!
... intanto che attendi risposta dallo STAFF, ...il problema segnalato a Eric è che i tuoi video non possono essere provati e verificati da nessuno, come da mie precedenti deduzioni...
... per fare le prove occorrono video YT-VM pubblici condivisibili, e comunque dai miei TEST pare che con YT-VM ci sia un problema se usati nello sfondo della riga...
.
Buongiorno Alberto,
il mio screenshot non proveniva dalla modalità anteprima, bensì dalla versione pubblicata di un progetto di test.
Provando nuovamente oggi, il video risulta visibile con l'oggetto Video e Galleria Vimeo e non presenta più i problemi di privacy, hai modificato delle impostazioni?
Ho segnalato la cosa e stiamo procedendo alle verifiche.
Autor
Ciao eric, si ho solo tolto la configurazione del "dominio" poi ho lasciato tutto pubblico come prima...
attendo le vs. verifiche, grazie
... dalle mie prove ho rilevato, salvo altro che può essermi sfuggito, che il codice embed iframe del video VM di Alberto può essere applicato solo dal proprietario e per sito convenzionato in cui viene incorporato...
Autor
però come viene incorporato sulla pagina... dovrebbe essere incorporato anche sull'intestazione
come dicevo a Eric il video è completamente pubblico per le impostazioni che ho disponibili, se proprio non è possibile impostarlo diversamente userò il video in locale ottimizzato che con il tuo codice funziona benissimo qui
... adesso pare che siamo a buon punto
, ...ma non hai applicato la modifica suggerita prima da 2000 a 3000 (o 4000+) ...per valutare eventuale latenza nella connessione VM, ...perchè nei miei test online a pagina già caricata il mio codice avvia regolarmente l'autoplay...
... ultimo passo e forse ci siamo, con gli EXTRA per ora ...
.
ciao
.
Autor
su quale dei due?
questo:
<script>
$(document).ready(function () {//K>;
/** -- integrazione autoplay x video Vimeo x sfondo riga x WSx5 by KolAsim --**/
setTimeout(function(){//K1>;
srcK =$("#imPageRow_1 iframe").attr("src");
$("#imPageRow_1 iframe").attr("src",srcK + "&mute=true");
}, 2000);//K1<<;
});//K<<;
</script>
o questo:
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(document).ready(function () { //K>;
/** -- autoplay video Vimeo x sfondo riga x WSx5 by KolAsim --**/
idvimeoK = "1067697992";
setTimeout(function(){ //K1>;
vimeoK = '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/'+idvimeoK+'?badge=0&autopause=0&autoplay=true&loop=true&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="BlueForce Smart Pro" alt="BlueForce Smart Pro" data-ready="true"></iframe></div>';
$("#imPageRow_1").append(vimeoK)
}, 3000);//K1<<;
}); //K<<;
</script>
... correggere 2000 in 3000 (o di più)(*) nel codice del >POST83, cioè questo:
<script>
$(document).ready(function () {//K>;
/** -- integrazione autoplay x video Vimeo x sfondo riga x WSx5 by KolAsim --**/
setTimeout(function(){//K1>;
srcK =$("#imPageRow_1 iframe").attr("src");
$("#imPageRow_1 iframe").attr("src",srcK + "&mute=true");
}, 3000);//K1<<;
});//K<<;
</script>
(*) - aumentare a 4000 oppure a 5000, ecc. provando fin quando non si trovil il valore adatto rispetto alla lentezza del caricamento...
.
Autor
Mah ... mi sembra di aver peggiorato, fa come un doppio salto, non era male come in precedenza impostato a "1000"
.. lang7 mi funziona in Firefox, forse perchè è più veloce a caricare la pagina...
... non mi funziona in edge e google, ove rimane stoppato...
... prova a passare da 3000 a 4000 ... e se non va poi ancora a 5000
Autor
Aspetta forse ho scambiato script !!!?
questo sul punto 1 "impostazioni"
<script>
$(document).ready(function () {//K>;
/** -- integrazione autoplay x video Vimeo x sfondo riga x WSx5 by KolAsim --**/
setTimeout(function(){//K1>;
srcK =$("#imPageRow_1 iframe").attr("src");
$("#imPageRow_1 iframe").attr("src",srcK + "&mute=true");
}, 4000);//K1<<;
});//K<<;
</script>
questo sulla pagina index proprietà-esperto
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(document).ready(function () { //K>;
/** -- autoplay video Vimeo x sfondo riga x WSx5 by KolAsim --**/
idvimeoK = "1067697992";
setTimeout(function(){ //K1>;
vimeoK = '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/'+idvimeoK+'?badge=0&autopause=0&autoplay=true&loop=true&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="BlueForce Smart Pro" alt="BlueForce Smart Pro" data-ready="true"></iframe></div>';
$("#imPageRow_1").append(vimeoK)
}, 1000);//K1<<;
}); //K<<;
</script>
... adesso con 4000 è OK su mio chrome e firefox, ma NON su edge e NON sul mio smartphone...
!
... prova a portare da 4000 a 5000 ... e verificare nuovamente...
... il ritardo sulla connessione vimeo potrebbe dipendere dalla protezione applicata al video ad al consenso nel rilevare il tuo sito...
... in questo caso vista l'attesa sarebbe da aggiungere il mio SupePreload, per distrarre il visitatore avvisandolo che qualcosa sta per accadere...
-------------------------------------
....!!!.. ... tieni anche presente che il video di lang6 = youtube è della stessa qualita di lang7 = vimeo...
... ma lan6 YT ora come ORA si carica senza problemi ovunque ed immediatamente, anche sul mio smartphone...
.
Autor
Anche su lang5, ho ridotto il video dell'80% mi sembra funziona bene...
... siamo tornati alle origini del primo Post ...
...
... lang5 va benissimo ...
...
(... anche lang6 - YT ...)
...!... poco importante, ma forse non hai esteso la cella dell'UOVO, perchè noto del padding di 10px; ... puoi anche lasciar così, inavvertibile...!...
.
ciao
..............................
... per lang7 non hai fatto la prova a 5000 ...
.
Autor
Si, si ho sistemato poco fa il padding ...
Mentre su lang7 aspettavo una risposta sul mio post precedente, perchè non sono sicuro di avere messo il codice sui posti giusti e ovviamente anche il 1000... 2000... 3000
... in lang7 vedo ancora 4000 nel codice evienziato da te in 4000 ...
... il resto è OK ...
Autor
si con 5000 è OK con Chrome e con Safari e con Edge non...
ho notato uno scatto subito dopo l'avvio ... è dovuto al ritardo "5000" ?
... sul mio PC funziona su tutti i browser, ma non sul mio smartphone...
... penso che i risultati di lang5-mp4 e di lang6-YT ... siano impareggiabili...
.
.... il propblema con vimeo è solo col tuo video; ...ne ho provato alcuni di alcuni utenti senza nessun problama, ma sempre con integrazione del mio codice per l'avvio automatico......
Autor
OK penso di aver raggiunto lo scopo, se hai la possibilità di inviarmi un link di un video vimeo funzionante (se non è una questione di privacy) così posso fare alcuni test e chiudo il post.
... OK ...la strada da preferire è quella con MP4 o con YT ...
... VM ne puoi trovare > qui, ed anche > qua ...
.
ciao
.
Dove si può vedere l'esempio operativo? Tutti i link sono negativi.
Autor
Ciao, ho finito la sperimentazione e volevo chiudere il post, casomai la settimana prossima li pubblico nuovamente per consultarli, attualmente ho tenuto solo questo.
Autor
Ho rimesso le varie prove in elenco di seguito
- con youtube qui
- con Vimeo qui
- con Vimeo qui (senza codice kol, non funzionante con W.S:)
- con il video residente sullo stesso server della pagina qui
... potrebbe interessarti, ...con la mia storica invenzione con il mio primo in assoluto DIV_CUSTOM (frutto 15 anni fa di un input di Icm-Stever x la v9), ...potresti ottenere anche il video in PARA-parallasse-FISSO...
... nel caso apri un nuovo argomento, qui siamo andati un po' oltre ...
.
ciao
.
Autor
Ok KOL eventualmente aprirò un nuovo Post, aspetto a chiudere questo in attesa che Eric mi dia una risposta definitiva al problema "vimeo" segnalato...
... OK ... nel caso ci rivedremo altrove...
... essendo questo Topic diventato un po' dispersivo, è difficile risalire al problema di fondo...
...
... ti consiglio di aprire un Nuovo Argomento, specificando il problema con VIMEO nello stile della riga, magari facendo anche riferimento a questo Argomento...
... se lo farai riattiverò l'attenzione per te...
.
ciao
.