oggetto video - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
CONTENT SLIDER
Smart Solutions...
CONTENT SLIDER
Smart Solutions...
INSERIMENTO E VISUALIZZAZIONE DI VIDEO IN LOOP SU OGGETTO CONTENT SLIDER
ADATTATO!!!
Progetto FREE
PREMESSE PRO CON VIDEO CONTRO CON VIDEO PRO SENZA VIDEO CONTRO SENZA VIDEO COSA SCEGLIERE?


Prima di addentrarci nel panorama degli slider a video bisogna sapere alcune cose:
Gli slider (o caroselli) sono elementi comuni nei siti web, spesso utilizzati per mostrare contenuti visivi in sequenza. Aggiungere video a uno slider può essere una scelta potente ma va valutata attentamente. Ecco i pro e contro di uno slider con video e senza video:



Slider con Video
Pro:
  • I video catturano più attenzione rispetto alle immagini statiche, migliorando il coinvolgimento.
  • Perfetto per narrare una storia, mostrare demo di prodotti o trasmettere emozioni.
  • Un breve video può comunicare molto più di un'immagine, utile per spiegare concetti complessi o mostrare azioni.
  • I video possono trasmettere il tono e lo stile del tuo brand in modo efficace.
Contro:
  • I video aumentano il peso della pagina, rallentando i tempi di caricamento (soprattutto su connessioni lente).
  • Se mal progettati, i video possono risultare troppo invadenti o distrarre da altri contenuti.
  • Potrebbero non funzionare bene su dispositivi meno performanti o in connessioni lente.
  • Video in autoplay possono disturbare utenti, soprattutto se includono audio.
Pro:
  • Immagini ottimizzate si caricano molto più velocemente rispetto ai video.
  • Non ci sono problemi legati al supporto del video o al consumo di risorse del dispositivo.
  • Gli slider statici possono dare un'impressione più formale e meno invadente.
  • Più semplice da implementare e gestire rispetto a uno slider con video.
Contro:
  • Le immagini statiche potrebbero non attirare l’attenzione come i video.
  • Non permette di mostrare azioni o sequenze che possono spiegare meglio un prodotto o servizio.
  • Gli utenti potrebbero ignorare uno slider statico se non è visivamente interessante.
Quando Scegliere uno Slider con Video
  • Quando hai contenuti video ben realizzati e leggeri.
  • Se desideri presentare dinamismo o narrare una storia visivamente.
  • Per promuovere prodotti, eventi o brand che si basano molto su emozioni visive.
Quando Scegliere uno Slider senza Video
  • Se la velocità di caricamento e la semplicità d’uso sono prioritari.
  • Quando vuoi una grafica leggera, adatta anche a connessioni lente o dispositivi più vecchi.
  • Per contesti formali o con pubblico che apprezza un’esperienza meno invadente.
Peso Ideale per un video?
  • 1,5mb a scendere.
Fatte le premesse passiamo alla progettazione.
PREPARAZIONE DEI BREAK POINT:
  • VAI AL PASSO 2 - MODELLO - ICONA RESPONSIVE DESIGN.
  • Realizza una struttura come nell'immagine seguente (devi avere una versione X5PRO per farlo) ▼ (OBBLIGATORIA SE VUOI SFRUTTARE QUESTO ESEMPIO)

  • Progetta una pagina
  • All'inizio (cella 1) metti un separatore da 60px . Estendilo per tutta la cella anche in stile riga. Lascia i margini impostati di default per il momento. Se tutto funzionerà a dovere non dovrai toccarli.
  • Sotto al separatore metti l'oggetto CONTENT SLIDER . Estendilo in larghezza anche sullo stile riga. Imposta i margini dell'oggetto,sia interni che esterni TUTTI A ZERO.
  • Ora portati sullo opzioni CONTENUTI del content slider. Metti la trasparenza sullo sfondo immagine e sull'owerlay. Non devi inserire nessuna immagine. Metti un tuo TITOLO, uno slogan e sul pulsante la voce CONTATTI (che dovrà puntare alla tua pagina contatti).
  • Ora portati sullo STILE del Tuo content slider e imposta una altezza di 450px, 50% come immagine, 48PX il Tuo Titolo, 14px il tuo slogan e 12px la voce CONTATTI del pulsante e imposta i margini INTERNI del bottone in 48x48x10x10.
  • Aggancia i due oggetti tra loro sempre mantenendo la massima estensione.
  • Ok ora sei pronto per mettere un video e una immagine di copertina. Tieni presente che altezza e margini sono indicati per questa soluzione ma ciò non toglie che tu possa modificarli in base alle tue esigenze.
  • Portati in stile riga e scegli VIDEO.
  • Inserisci il tuo video
  • Inserisci la tua immagine di copertina



INSERIMENTO DEL CODICE EXTRA
  • Vai al PASSO 3 - MAPPA - PROPRIETA' e poi su esperto. Incolla tutto il codice che segue e mettilo su ►prima della chiusura del tag HEAD
  • In neretto l'identificatore di questo slide che andrà sostituito (su tutto l'intero codice) con il vostro che trovate facendo ispezione codice della vostra pagina.
<style>
/* Regola generale per il contenitore dello slider fusione di codice GiancarloWeb-Giuseppe Guida-Max*/
#imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
     background-color: rgba(229, 173, 38, 0.86); /* Colore pulsante */
 }
#imObjectContentSlider_10_255 {
  width: 100%; /* Larghezza piena del contenitore */
  height: auto; /* Altezza automatica */
  display: flex; /* Usa Flexbox per l'allineamento */
  justify-content: center; /* Centra gli elementi orizzontalmente */
  align-items: center; /* Centra gli elementi verticalmente */
  overflow: hidden; /* Nasconde gli elementi che escono dal contenitore */
  margin: 0; /* Nessun margine */
  padding: 0; /* Nessun padding */
  box-sizing: border-box; /* Include bordi e padding nella dimensione */
}

/* Stile per le immagini dello slider */
.content-slider.slide-image-content {
  width: 100%; /* L'immagine occupa tutta la larghezza */
  height: auto; /* Altezza proporzionata alla larghezza */
  object-fit: cover; /* Riempie l'area senza distorsioni */
  box-sizing: border-box; /* Calcolo dimensioni inclusivo */
}

/* Media Query per diversi breakpoint */

/* Risoluzioni >= 1680px */
@media (min-width: 1680px) {
  #imObjectContentSlider_10_255 {
      min-height: 720px; /* Altezza minima per risoluzioni alte */
  }
  .content-slider.slide-image-content {
      object-fit: cover; /* Copertura completa */
  }
  .slide-title {
      font-size: 28px; /* Dimensione del testo più grande */
  }
  .slide-button {
      font-size: 16px; /* Dimensione maggiore per i pulsanti */
      padding: 10px 20px; /* Spaziatura pulsanti */
  }
}

/* Da 1679,9px a 1379px */
@media (max-width: 1679.9px) and (min-width: 1380px) {
  #imObjectContentSlider_10_255 {
      min-height: 350px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 24px;
  }
  .slide-button {
      font-size: 14px;
      padding: 8px 16px;
  }
}

/* Da 1378,9px a 1280px */
@media (max-width: 1378.9px) and (min-width: 1280px) {
  #imObjectContentSlider_10_255 {
      min-height: 350px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 22px;
  }
  .slide-button {
      font-size: 12px;
      padding: 6px 14px;
  }
}

/* Da 1279,9px a 1149px */
@media (max-width: 1279.9px) and (min-width: 1150px) {
  #imObjectContentSlider_10_255 {
      min-height: 300px;
  }
  .content-slider.slide-image-content {
      object-fit: contain; /* Adatta l'immagine senza tagliarla */
  }
  .slide-title {
      font-size: 20px;
  }
  .slide-button {
      font-size: 11px;
      padding: 5px 12px;
  }
}

/* Da 1148,9px a 960px */
@media (max-width: 1148.9px) and (min-width: 961px) {
  #imObjectContentSlider_10_255 {
      min-height: 100px;
  }
  .content-slider.slide-image-content {
      object-fit: contain;
  }
  .slide-title {
      font-size: 18px;
  }
  .slide-button {
      font-size: 10px;
      padding: 4px 10px;
  }
}

/* Da 959,9px a 720px */
@media (max-width: 959.9px) and (min-width: 721px) {
  #imObjectContentSlider_10_255 {
      min-height: 100px;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 30pt !important; /* Testo più grande */
  }
}

/* Da 719,9px a 200px */
@media (max-width: 719.9px) and (min-width: 200px) {
  #imObjectContentSlider_10_255 {
      min-height: 350px !important;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 26pt !important;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px; /* Dimensione dei pulsanti di controllo */
      height: 40px;
  }
 }

/* Da 599,9px a 200px */
@media (max-width: 599.9px) and (min-width: 200px) {
  #imObjectContentSlider_10_255 {
      min-height: 250px !important;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 22pt !important;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_10_255 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px;
      height: 40px;
  }
}

/* Fine codice personalizzato */
</style>
Vai sull'anteprima e guardalo con uno dei browser disponibili. Calcola che il video in anteprima non lo vedrai.Solo lanciando uno dei tuoi browser potrai valutare il tuo progetto. Se tutto è andato per il verso giusto otterrai un video accattivante e coinvolgente senza audio che gira in loop. Questo content slider non è al 100% responsive ma facendo alcune prove o variando riferimenti al codice si può ottenere un adattamento quasi prossimo al responsive ma comunque lasciandolo così avrai un giusto compromesso di visualizzazione.
COMMENTA ▼
5.0 / 5
2 recensioni
5 
2
4 
0
3 
0
2 
0
1 
0

FABRIZIO M.
Lunedì 10 Mar 2025
Non sono un esperto di programmazione, ma grazie a questo sito ho imparato a padroneggiare tecniche che pensavo fossero fuori dalla mia portata.
TIZIANA
Sabato 08 Mar 2025
Bellissimo lo slider video. Roby sei il number one ☺

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti