• User Attivo

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

    Ciao, chiedo aiuto perchè non riesco a centrare il video sopra di questa pagina html test
    https://www.nastri-trasportatori.net/video21.html

    Inoltre non ho capito come fare per impostare il video al 90% della larghezza e responsive (in modo che da cellulare si possa ridimensionare senza spostare tutto il layout ..

    Sapreste darmi una mano a capire come modificare il mio codice? (possibilmente senza scomodare il css esterno)

    Grazie anticipato 🙂


    lucas65 shazarak 2 Risposte
  • User

    @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>


    A 1 Risposta
  • User Attivo

    @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? ^__^


  • User

    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


    A 1 Risposta
  • User Attivo

    @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;
    }
    

    A 1 Risposta
  • User Attivo

    @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 🙂


  • User Attivo

    @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 ^__^


  • User

    Gli stili li puoi utilizzare in 3 modi diversi.

    1. Inline, come ho fatto io inserendo la regola CSS nel TAG HTML
    2. Nella pagina inserendo le regole CSS tra i tag HTML <style></style> all'interno dei tag <head> </head>
    3. 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


    A 1 Risposta
  • User Attivo

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

    Gli stili li puoi utilizzare in 3 modi diversi.

    1. Inline, come ho fatto io inserendo la regola CSS nel TAG HTML
    2. Nella pagina inserendo le regole CSS tra i tag HTML <style></style> all'interno dei tag <head> </head>
    3. 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 1 Risposta
  • Miglior Risposta
    User

    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...


    A 1 Risposta
  • User

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


  • User Attivo

    @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?


  • User

    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

    <!-- COOKIE BANNER -->
    <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


  • User

    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.


    A 1 Risposta
  • User Attivo

    @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?


  • User

    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 !


    A 1 Risposta
  • User Attivo

    @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 ^__^