Banale richiesta aiuto per centrare e rendere "responsive" un video

lucas65

@arluc ciao, ho dato una occhiata. Non trovo caricate le classi css che dovrebbero centrare il <div> (riverifica il codice). Temporaneamente puoi ovviare nel codice HTML (non è una buona prassi, dovrebbe essere il CSS a gestire il posizionamento):
<div class="center" style="text-align:center">
<video controls="controls">
<source src="https://www.nastri-trasportatori.net/video/Trasportatore a nastro edilizia.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

arluc

@lucas65 Figo!

fatto e funziona

e ora come debbo fare per comandare la larghezza a piacere? Tipo larghezza 80% ...

e per rendere tutta la pagina responsive? (ora come ora ho fatto un pasticcio, su cell è orrendamente spaginato ...)

Riesci a darmi una mano anche per queste due cose? ^__^

lucas65

E' da un pò che non seguo queste cose... Di solito per gestire la responsività delle pagine web (mobile compreso) si utilizza flexbox (nativo CSS 3) oppure bootstrap che è una libreria esterna (https://getbootstrap.com/) che vedo parzialmente importata nella pagina. Nel tuo caso, visto che la struttura della pagina non è molto complessa forse del "semplice" CSS potrebbe essere sufficiente. Spero che qualcuno di pù ferrato ti possa aiutare.
P.S. la pagina sembra derivare da qualche cosa di un pò più articolato, ti consiglio una bella revisione e semplificazione del codice

shazarak

@arluc
per il il responsive e discorso 90%

aggiungi una classe al tag video esempio <video controls="controls" class="resp">

e poi metti in css

.resp {
width:90%;
}

questo pero ti mette il videro al 90% della larghezza della finestra browser

se invece vuoi che sia larga che ne so al massimo 800px ( il centrato lo hai gia messo) sugli schermi tablet o desktop, ma che prenda solo il 90% della larghezza dello schermo mobile, aggiungi un valore di max-width

.resp {
width:90%;
max-width:800px;
}

arluc

@lucas65 ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

P.S. la pagina sembra derivare da qualche cosa di un pò più articolato, ti consiglio una bella revisione e semplificazione del codice

Grazie, vorrei ma non saprei da che parte iniziare per pulire e togliere quello che non serve .. ho provato a volte ma facevo solo casini - Purtroppo non me ne intendo tanto e mi limito a copiare in giro, adattare e cercare di capire, ma spesso mi pianto .. come in questo caso - grazie di nuovo per il tuo aiuto

arluc

@shazarak ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

@arluc
se invece vuoi che sia larga che ne so al massimo 800px ( il centrato lo hai gia messo) sugli schermi tablet o desktop, ma che prenda solo il 90% della larghezza dello schermo mobile, aggiungi un valore di max-width
.resp {
width:90%;
max-width:800px;
}

^__^ mi hai letto nel pensiero
ma siccome anche di CSS ne capisco poco, non posso mettere quello che hai suggerito tutto in linea in html senza scomodare CSS? Per mè sarebbe più semplice ...

Se butto nel html una cosa così

.resp {
width:90%;
max-width:800px;
}
<video controls="controls" class="resp">

può funzionare o ci sono regole che non ho rispettato?

sotto lascio sempre

<source src="https://www.nastri-trasportatori.net/video/Trasportatore a nastro edilizia.mp4"

o debbo cambiare qualcosa?

Grazie per l'aiuto ^__^

lucas65

Gli stili li puoi utilizzare in 3 modi diversi.

Inline, come ho fatto io inserendo la regola CSS nel TAG HTML
Nella pagina inserendo le regole CSS tra i tag HTML <style></style> all'interno dei tag <head> </head>
Come file esterni utilizzando il tag <link > all'inteno dei tag <head></head>
Il 3 è il più usato perchè più pagine possono avvantaggiarsi dello stesso codice utilizzando un file esterno
Se vuoi utlizzare il codice che ti ha suggerito @shazarak nella pagina lo puoi inserire utilizzando il metodo 2
Cioè inserendo
<style>
.resp {
width:90%;
max-width:800px;
}
</style>
all'interno dei tag <head>

Poi devi assegnare la classe resp al tag contenitore che vuoi controllare es. <div class="resp">

Un buon sito dove sono riportate queste cose è w3schools.com.
E' in inglese ma è abbastanza facile da comprendere

arluc

@lucas65 ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

Gli stili li puoi utilizzare in 3 modi diversi.

Inline, come ho fatto io inserendo la regola CSS nel TAG HTML

Nella pagina inserendo le regole CSS tra i tag HTML <style></style> all'interno dei tag <head> </head>

Come file esterni utilizzando il tag <link > all'inteno dei tag <head></head>
Il 3 è il più usato perchè più pagine possono avvantaggiarsi dello stesso codice utilizzando un file esterno
Se vuoi utlizzare il codice che ti ha suggerito @shazarak nella pagina lo puoi inserire utilizzando il metodo 2
Cioè inserendo
<style>
.resp {
width:90%;
max-width:800px;
}
</style>
all'interno dei tag <head>

Poi devi assegnare la classe resp al tag contenitore che vuoi controllare es. <div class="resp">

Un buon sito dove sono riportate queste cose è w3schools.com.
E' in inglese ma è abbastanza facile da comprendere

Ciao, ho provato ad applicare quì
https://www.nastri-trasportatori.net/video22.html
ma vedo che da cellulare non migliora, resta tutto spostato e ammassato ...

.. poi però a farci caso, in realtà anche la pagina principale (da cui ho ricavato le altre)
www.nastri-trasportatori.net
è tutta spostata e ammassata
( spostata e ammassata.jpg image url)

.. presumo per colpa dei video caricati che per qualche motivo "sporgono" ... uhmm però forse non è colpa dei video o sì ... ? sob ...

Avete voglia di GUIDARMI a capire e sistemare la pagina principale e questa video22.html ?

Grazie ancora per il tempo che vorrete dedicarmi ^__^

lucas65

Ciao, non è un lavoro banale... Ho dato una risistemata al codice ed ho pubblicato una pagina video21.html "rivista e responsive" online qui: http://www.datadisplay.altervista.org/
Copia il codice HTML di index.html e mettilo nella tua pagina HTML (prima salvati il vecchio).
C'è bootstrap, poi studiatelo un pò e modificalo / copialo dove hai bisogno.
Quando hai fatto dimmelo che lo tolgo.
Di più non posso fare...

lucas65

@arluc Ricordati di sistemare la gestione privacy/cookies e GDPR...

arluc

@lucas65 ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

Ciao, non è un lavoro banale... Ho dato una risistemata al codice ed ho pubblicato una pagina video21.html "rivista e responsive" online qui: http://www.datadisplay.altervista.org/
Copia il codice HTML di index.html e mettilo nella tua pagina HTML (prima salvati il vecchio).
C'è bootstrap, poi studiatelo un pò e modificalo / copialo dove hai bisogno.
Quando hai fatto dimmelo che lo tolgo.
Di più non posso fare...

... ho copiato e sistemato dei collegamenti che con il copia si modificano, ma non ho capito se ho fatto tutto bene, temo di no ... qualcosa manca secondo mè ma non sò come sistemarlo, comunque all'apparenza funziona, guarda:
https://www.nastri-trasportatori.net/video26.html

.. avrei tante domande da farti per migliorare e capire ancora .. posso approfittare ancora della tua pazienza e chiedere o ho raggiunto il tuo limite di sopportazione?

lucas65

Ciao, mi sembra che la pagina sia corretta come infrastruttura. Hai però modificato la gestione dei cookies inserendo del codice html che non serve.
Per sistemare devi lasciare il solo TAG

<script type="text/javascript" src="css/nibirumail.js"></script>

(IMPORTANTE IL .js del file nibirumail) togliendo tutto quello che hai aggiunto (<div id="nibirumail_cookie_advice"....>
e, soprattutto, devi mettere nella cartella dove hai i CSS il file nibirumail.js (è in questo file che devi mettere la gestione della barra dei cookies, come ad es. la pagina da reindirizzare per ulteriori informazioni).
Questo file lo avevi nella cartella CSS del video21.html

lucas65

Non ho raggiunto il limite di sopportazione (sennò non farei questo mestiere.. :-)), semmai di tempo. E' complicato rivedere tutta una pagina HTML con librerie varie "solo a parole" (al momento il forum non mi risulta attrezzato per la condivisione di codice).
Se si tratta di un singolo problema la cosa è fattibile, per la revisione/aiuto su pagine complesse probabilmente esistono forum più specifici.

arluc

@lucas65 ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

... (sennò non farei questo mestiere.. :-))

Come faccio a contattarti in PV?

Vorrei chiederti se possibile una consulenza/insegnamento tipo, io ti faccio domande e richieste di migliorie come sopra e tu me le fai ma poi me le spieghi (così magari imparo) sotto compenso ... può essere una strada percorribile?

lucas65

Mi spiace ma purtroppo in questo periodo ho veramente poco tempo a disposizione anche perchè mi sto orientando verso altre attività.
Se non hai amici o conoscenti programmatori (scelta consigliata) potresti provare a chiedere nel forum se c'è qualche sviluppatore web disponibile per un "affiancamento".
Si tratta di prendere un pò dimestichezza con HTML, CSS e altre librerie varie (Jquery, Bootstrap etc).
In bocca al lupo !

arluc

@lucas65 ha detto in Banale richiesta aiuto per centrare e rendere "responsive" un video:

Mi spiace ma purtroppo in questo periodo ho veramente poco tempo a disposizione anche perchè mi sto orientando verso altre attività.
Se non hai amici o conoscenti programmatori (scelta consigliata) potresti provare a chiedere nel forum se c'è qualche sviluppatore web disponibile per un "affiancamento".
Si tratta di prendere un pò dimestichezza con HTML, CSS e altre librerie varie (Jquery, Bootstrap etc).
In bocca al lupo !

Ti ringrazio sia per l'aiuto che per la tua risposta sopra -
questa sera e nel fine settimana tenterò di capire e sistemare con quello che hai detto sopra, sicuramente lascierò quì altre domande perchè buona parte delle cose che mi suggerisci non le capisco

Spero qualcuno mi continui a rispondere,

Grazie ancora ^__^

arluc

@luca65
Ciao, con  dovrei essere a posto quì https://www.nastri-trasportatori.net/video27.html

mi rimane da capire cosa intendevi con "Ricordati di sistemare la gestione privacy/cookies e GDPR..."

e capire come posso fare per ridurre la parte bianca sopra alla prima scritta "RISTRUTTURA AL 110% SENZA FATICA" o ancora meglio come dovrei fare per inserire sopra lo stesso menù che appare nelle altre pagine (home) quando scolli leggermente in basso (appare il menù che vorrei mettere fisso quì)

In ogni caso, grazie ancora per il tuo supporto
^__^

lucas65

Ciao,

il discorso cookies/privacy/GDPR riguarda delle leggi europee per cui devi avere l'autorizzazione ad utilizzare dati personali (es. email) di clienti e devi informarli se li "tracci" con cookies o altri mezzi informatici, pena multe (ho sintetizzato al massimo, è un argomento complesso con risvolti legali).
Il come fare è spesso fonte di interessanti discussioni anche qui nel forum.
Il codice che vedo nella pagina funziona (HTML è di "bocca buona") ma non mi pare formattato correttamente (es. manca <body> ed altri tag.
In generale un file HTML dovrebbe avere questa struttura minimale:
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
La barra menù mi sembra gestita dal TAG <nav di bootstrap che dovresti quindi riportare nella tua pagina
MA SOPRATTUTTO se accedo alla tua homepage (https://www.nastri-trasportatori.net) e la "esploro" con strumenti quali wappalyzer mi dice che usa il framework ANGULAR.JS (che non conosco).
Se si usa un framewrok (peraltro angular.js è stato sostituito da Angular 2+) e devi apportare modifiche al codice devi farlo utilizzando il framework che ha una propria logica di gestione. Non so quanto si possa "inserire" una singola pagina HTML in maniera autonoma (penso non si possa fare).

arluc

@lucas65 ...
tu sei molto gentile ma io sono più ignorante ... parli quasi arabo ..

.. provo a chiedere aiuto per l'affiancamento come avevi consigliato ...

... se ti liberi, fatti avanti