VIDEO RICHIAMATO DA YOUTUBE SU OGGETTO IMMAGINE
RESPONSIVE IN LOOP CONTINUO - NO AUDIO
Progetto FREE
WS 2024.2.8.
VANTAGGI
- Uno dei principali vantaggi di un video richiamato da youtube è che la banda passante del tuo server rimane sempre libera, anche quando ci sono molti visitatori simultanei sul tuo sito. Questo è un problema che si presenta quando i video sono ospitati direttamente sul tuo server: un numero elevato di accessi contemporanei può causare rallentamenti significativi, fino a portare al blocco o alla paralisi del sito nel browser dei visitatori.
- Un altro grande vantaggio è la disponibilità quasi immediata del flusso video. Al contrario, con video ospitati direttamente sul server, alcuni browser potrebbero avviare il flusso solo dopo il completamento del download, creando attese e disagi per gli utenti.
PREPARAZIONE AL TUTORIAL
Crea una pagina di test
Nella prima riga in struttura metti un oggetto immagine 
Estendi l'oggetto sia in proprietà che nello stile righe
Vai su margini e imposta quelli ESTERNI e quelli INTERNI tutti a ZERO.
Fai doppio click sull'oggetto IMMAGINE e carica una tua immagine in trasparenza di questo formato: 2540 x 1440
A destra delle opzioni scegli VIDEO
Carica il tuo video cliccando sull'icona mappamondo. Scegli il tuo video senza audio - consigliato.
Sotto nelle opzioni troverai anche l'opzione per mettere una immagine di copertina. E' facoltativo dato che già va a pescare quella di Youtube.
Hai terminato il tutorial
NESSUN CODICE EXTRA RICHIESTO.
Questo tutorial espone un video caricato da youtube.
OPZIONI FACOLTATIVE
Richiede codice extra
Se vuoi che il tuo header venga posto in trasparenza sino alla soglia dei 960px devi portarti sulle proprietà della pagina- PASSO 3 - e su codice inserire il seguente listato PRIMA DELLA CHIUSURA DEL TAG HEAD.
<style> body {overflow-x:hidden} </style> <style> #imHeader_imMenuObject_02-menu-opened.animated {z-index: 50000 !important;} #imContent { position: relative !important; top: -120px !important; } #imHeader {z-index: 30000 !important;} /* Disabilita le regole tra 380px e 959.9px */ @media screen and (max-width: 959.9px) and (min-width: 380px) { #imHeader_imMenuObject_02-menu-opened.animated {z-index: initial !important;} #imContent { position: initial !important; top: initial !important; } #imHeader {z-index: initial !important;} } </style> |
COMMENTA ▼
Non sono presenti ancora recensioni.