Incorpora video di YouTube (Guida definitiva)
Pubblicato: 2018-07-31Ciao gente di Internet, stai cercando un modo semplice per incorporare video , playlist e canali di YouTube nel tuo sito Web o WordPress?
In questa guida completa imparerai tutti i diversi modi per incorporare un video di YouTube e come personalizzarlo in base alle tue esigenze (inclusi esempi di codice).
Dai un'occhiata sotto un sommario e scegli quello che stai cercando.
CONTENUTI
Come incorporare i video di YouTube in WordPress
Incorpora un video di YouTube nella pagina di WordPress senza plug-in (oEmbed)
Shortcode WordPress per YouTube
Utilizzo di un Iframe
Come incorporare video di YouTube in WordPress con un plug-in
Incorpora YouTube nella barra laterale di WordPress
Incorpora YouTube in HTML
Opzioni avanzate del lettore video di YouTube
Youtube Autoplay Embed (funziona su dispositivi mobili iOS e iframe Android)
Problemi più comuni con l'incorporamento di YouTube
Incorpora il video di YouTube su Facebook nel 2018
Come incorporare i video di YouTube in WordPress
In sostanza hai le seguenti opzioni per incorporare il tuo video in un sito Web WordPress:
- Funzione di incorporamento di WordPress predefinita (oEmbed)
- Shortcode WordPress per YouTube
- Utilizzo di un Iframe
- Installazione di un plug-in
La differenza tra le opzioni di cui sopra è che puoi personalizzare il lettore video mentre scorri l'elenco. In altre parole, la funzione predefinita non ha opzioni e l'installazione di un plug -in avrà tutte le opzioni possibili .
Incorpora un video di YouTube nella pagina di WordPress senza plug-in (oEmbed)
Va bene, volevo solo menzionare che puoi incorporare i video di YouTube nei post del blog di WordPress senza un plug -in.
Hai solo meno opzioni di configurazione , ma per la maggior parte delle persone sarà sufficiente. Se hai bisogno dell'opzione di riproduzione automatica di YouTube, controlla la sezione iframe di seguito.
Ecco un video che spiega come:
Per incorporare un video in un post WP:
Basta incollare l'URL nell'area di testo . E dovrebbe convertire l'URL in un video di YouTube .
Nel caso in cui non funzioni, ecco come incorporare il video Y0uTube in WordPress senza plug-in:
- Vai al post del blog o alla pagina che desideri aggiornare.
- Fai clic su "Aggiungi media" nella parte superiore dell'area di testo. Questo aprirà la libreria multimediale.
- Quindi seleziona "Inserisci da URL" dalla colonna di sinistra.
- Incolla il tuo URL di YouTube.
- Nell'angolo in basso a sinistra, fai clic sul pulsante "Inserisci nel post".
- Ora il video di YouTube incorporato apparirà nel tuo post.
A proposito, funzionerà anche senza YouTube . Basta usare qualsiasi video.
Puoi eseguire lo streaming da altre piattaforme o utilizzare i tuoi server (nella maggior parte dei casi questo non è consigliato).
Puoi caricare un video facendo clic sul pulsante "Aggiungi media" nel post di WordPress e caricando un video.
Shortcode WordPress per YouTube
Ecco come incorporare un video utilizzando uno shortcode . Questo ti darà la flessibilità di impostare la larghezza e l'altezza del video. Assicurati di testarlo anche su dispositivi mobili.
Per implementare WordPress YouTube con shortcode, usa lo shortcode sotto e sostituisci il testo rosso con l'URL del tuo video (anche l'URL breve va bene).
embed width=”320” height=”180” URL YouTube [/embed]
Ad esempio: embed width=”320” height=”180” https://youtu.be/B4yV3AO7G6E [/embed]
Puoi farlo in modalità visiva o testuale in WordPress .
Detto questo, trovo inutile l'incorporamento dello shortcode , poiché le altre opzioni sono più semplici o hanno più opzioni di personalizzazione.
Utilizzo di un Iframe
Se hai bisogno di molte opzioni di personalizzazione come l'incorporamento della riproduzione automatica di YouTube, un iframe sarà l' opzione migliore per te.
Avrai bisogno di questo in modalità testo in WordPress. Ti mostrerò di seguito come farlo.
Come ottenere il codice di incorporamento di YouTube
Innanzitutto, per utilizzare un iframe, avrai bisogno del codice di incorporamento di YouTube.
Ecco come lo ottieni:
Vai al video di YouTube che desideri visualizzare sul tuo sito.
Sotto il video clicca su “ Condividi ” e seleziona “ Incorpora ”.
Ora apparirà un popup con il codice di incorporamento e alcuni parametri extra che puoi impostare. In realtà ci sono più opzioni di incorporamento, ma ti mostrerò come ottenerle più avanti in questo articolo.
Esempio di codice di incorporamento di YouTube utilizzando un iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/B4yV3AO7G6E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>Come personalizzare il player di YouTube
Lascia che ti mostri come utilizzare opzioni personalizzate come la riproduzione automatica .
Prima di tutto, ecco come aggiungere parametri nell'URL iframe https://www.youtube.com/embed/B4yV3AO7G6E ? riproduzione automatica=1
Se vuoi più opzioni , aggiungile semplicemente con " & " (il primo valore inizia ancora con " ?" segno )
https://www.youtube.com/embed/B4yV3AO7G6E ? riproduzione automatica=1&rel=0&start=33
Se non vuoi pensare al formato e a tutto il codice iframe . Basta usare il generatore di incorporamento di YouTube come quello di Classynemesis.
Opzioni di personalizzazione del lettore YouTube più utili
autoplay=1 – Quando una pagina viene caricata, la riproduzione del video inizierà automaticamente.
rel=0 – Nasconde i video correlati alla fine di un video.
start=33 – Specifica l'ora di inizio (il valore è in secondi).
end=66 – Specifica il tempo di arresto (il valore è in secondi).
controlli=0 – Rimuove i controlli del lettore video come riproduzione, volume, impostazioni ecc.
showinfo=0 – Disabilita le opzioni di condivisione e il titolo.
loop=1 – Riproduce il video in loop.
disablekb=1 – Disabilita i controlli da tastiera.
cc_load_policy=1 – I sottotitoli saranno abilitati per impostazione predefinita.
iv_load_policy=3 – Rimuove eventuali annotazioni.
modestbranding=1 – Nasconde il logo di YouTube.
consenti schermo intero: può essere aggiunto all'HTML per consentire il lettore a schermo intero, se lo si omette, gli utenti non saranno in grado di vedere il video a schermo intero.
Esempio sotto, rimuovi semplicemente la parte rossa del codice:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/B4yV3AO7G6E” frameborder=”0″ allow=”autoplay; media-crittografato” allowfullscreen ></iframe>
Modalità privacy avanzata: scambia la prima parte dell'URL da www.youtube.com a www.youtube-nocookie.com.
Esempio:
<iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com /embed/ B4yV3AO7G6E ” frameborder=”0″ allow=”autoplay; media-crittografato” allowfullscreen></iframe>
Elenco completo delle opzioni di personalizzazione del lettore YouTube.
Come incorporare video di YouTube in WordPress con un plug-in
I plugin sono utili e facili da installare. E ne avrai bisogno se desideri visualizzare una galleria di YouTube o un live streaming .
Ecco un video tutorial:
Se vuoi saperne di più o seguire il tuo ritmo, di seguito è riportato lo stesso tutorial.
Installa il plug-in YouTube per WordPress
Installare il plugin YouTube di WordPress è facile e funziona come tutti gli altri plugin.
1. Dopo aver effettuato l'accesso a WordPress, passa con il mouse su "Plugin" nella colonna di sinistra e fai clic su "Aggiungi nuovo".
2. Nella barra di ricerca digita "YouTube".
3. Quindi scegli il plug-in "YouTube", dovrebbe essere la prima opzione.
4. Fare clic su "Installa ora".
5. Al termine dell'installazione, fare clic su "Attiva".
6. Ora hai "Youtube" nella colonna di sinistra, fai semplicemente clic su di esso.
Questo plugin fornisce molte diverse opzioni di configurazione, tratterò solo quelle principali.
Il primo è la chiave API di YouTube. Lo restituirò tra un minuto, poiché devi ottenerlo da Google. Nessun problema, è facile.
Lascia che prima ti mostri altre impostazioni importanti. Basta scorrere verso il basso. Come puoi vedere molte opzioni tra cui scegliere. Per me, la cosa più importante è che il mio video sia reattivo. Quindi si adatta alle dimensioni del dispositivo degli utenti.
Basta aggiungere un segno di spunta su "Ridimensionamento video reattivo".
Puoi giocare con le altre opzioni. Sono spiegati abbastanza chiaramente. Ma se hai domande su qualcuno di loro. Lasciami un commento qui sotto.
Ok, salviamo queste impostazioni.
Incorpora video singolo
Successivamente, incorporeremo un singolo video in un post.
1. Vai al tuo post in WordPress,
2. Fare clic sul pulsante "YouTube" sopra l'area di testo (questo pulsante dovrebbe apparire dopo aver installato il plug-in).
3. Viene visualizzato un popup con più scelte, basta fare clic su "Incorpora un singolo video",
4. Incolla l'URL del video. Può essere URL completo o URL abbreviato.
5. Fare clic su "Invia".
6. Vedrai un'anteprima del video. E hai 2 opzioni. Per gli utenti Pro, c'è un'opzione di personalizzazione. Ciò ti consente di personalizzare in dettaglio gli attributi del video e il posizionamento nella pagina.
7. Non ne abbiamo bisogno in questo momento, quindi selezioniamo "Inserisci nell'editor".
8. Ora nel tuo post viene visualizzato uno strano URL. È solo uno shortcode e WordPress lo riconoscerà e visualizzerà il video di YouTube, quando l'utente lo vedrà.
9. Salvare le modifiche facendo clic su "Aggiorna".
10. Diamo un'occhiata al post del blog sul front-end.
Come puoi vedere dal video si vede bene. Diamo un'occhiata al cellulare.
facendo clic con il tasto destro ovunque (funziona anche su Chrome)
E selezionando " Ispeziona elemento "
Qui a destra seleziona l'icona del cellulare.
Questo ridimensionerà la finestra alle dimensioni del cellulare.
Il video sembra buono e ha mantenuto le sue proporzioni.
Come ottenere una chiave API di YouTube per un plug-in
Per utilizzare playlist e incorporamenti di canali avrai bisogno della chiave API di YouTube. Se sai già che ne hai bisogno, dai un'occhiata a questo tutorial, dove ti mostro come ottenere una chiave API di YouTube.
Mostra una galleria di YouTube in WordPress
Sono nelle impostazioni del plug-in di YouTube. Ho appena copiato la chiave API negli appunti.
Ora aggiungilo al campo "Chiave API di YouTube" e fai clic su "Salva modifiche"
Quindi, vai al tuo post.
1. Fare clic sul punto in cui si desidera visualizzare il video nell'area di testo.
2. Seleziona il pulsante "YouTube" in alto.
3. E nel popup seleziona "Incorpora una playlist".
Lascia che ti mostri come catturare una playlist su YouTube. Funzionerà anche con le playlist di altre persone.
4. Assicurati di aver effettuato l'accesso a Google.
5. Nella home page apri il menu hamburger a sinistra, il mio è già aperto.
6. E seleziona la playlist che desideri visualizzare.
7. Prendi l'URL.
8. Ora incolla l'URL in WordPress.
9. Vedrai un'anteprima della playlist e 3 opzioni. Ti mostrerò l'opzione Playlist tra un secondo. Per prima cosa scelgo la galleria.
10. Salva le modifiche.
Ora se visualizziamo la pagina, vedrai che c'è una galleria di video nel mio post.
Anche qui sembrerebbe se avessimo scelto l'opzione "Playlist". Fondamentalmente è una playlist completamente funzionante e hai anche la possibilità di scorrere i video nella playlist.
Incorpora un canale YouTube
L'aggiunta del canale YouTube al tuo sito avrà quasi lo stesso aspetto dell'opzione playlist.
Ecco come puoi aggiungerlo:
- Vai al tuo post.
- Fare clic sul pulsante "YouTube".
- E nel popup seleziona "Incorpora una playlist"
Ecco come ottenere l'URL del canale su YouTube.
1. Assicurati di aver effettuato l'accesso a Google.
2. Fai clic sulla tua icona nell'angolo in alto a destra.
3. E seleziona "Il mio canale".
4. Prendi l'URL.
5. Ora incolla l'URL in WordPress (assicurati che non abbia valori come ?view_as….).
6. Ci sarà un'anteprima dei video del canale e tre opzioni. Ti mostrerò l'opzione della galleria in un secondo. Per prima cosa scelgo la galleria.
7. Salva le modifiche.
Ecco la playlist del canale.
Ed ecco come appare la galleria del canale YouTube. Come puoi vedere ha anche l'impaginazione.
Incorpora un live streaming di YouTube su WordPress
È possibile aggiungere un live streaming di YouTube dal tuo sito web.
- Nel popup di YouTube seleziona "Incorpora un live streaming".
- Aggiungi l'URL del canale da cui verrà trasmesso il feed dal vivo. (o qualsiasi video da quel canale. Il plugin ha solo bisogno del canale).
- Vai su WordPress.
- E seleziona le impostazioni del plug-in di YouTube.
- Nell'area di testo "Contenuto non live predefinito", puoi specificare cosa visualizzare mentre lo streaming non è live.
Ecco un video tutorial per il live streaming:
Incorpora YouTube nella barra laterale di WordPress
Puoi anche incorporare un video di YouTube nella barra laterale (in WordPress 4.8 e versioni successive). Lascia che ti mostri come puoi farlo.
- Vai su “ Aspetto ” e scegli “ Personalizza ”.
- Fare clic su " Widget ".
- Seleziona la barra laterale a cui vuoi aggiungere il video.
- Nella casella di ricerca digita " video " e selezionalo.
- Fare clic su " Aggiungi video ".
- Seleziona " Inserisci da URL ".
- Prendi l'URL di un video di YouTube e incollalo nel campo .
- Fare clic su " Aggiungi al widget ".
- E in alto clicca su “ Salva e pubblica ”.
Incorpora YouTube in HTML
A volte devi solo incorporare il video in un semplice HTML.
Ecco un video tutorial:
Innanzitutto, prendi il codice di incorporamento di un video di YouTube. Ora vai al tuo codice HTML e incolla il codice per l'incorporamento.
Dovresti vedere del codice con la parola "iframe" al suo interno.
Salva il codice HTML.
E ora puoi visualizzare il video sul tuo sito web.
Ok, il video sembra buono su desktop, ma per quanto riguarda i dispositivi mobili? Controlliamolo.
Non sembra che il video sia reattivo. Per impostazione predefinita, non lo sarà e avrai bisogno di un po' di CSS per renderlo reattivo.
Incorporamento YouTube reattivo
Il responsive web design significa semplicemente che il video si adatterà a qualsiasi dimensione dello schermo . Questo è ciò che vogliamo che faccia anche il nostro video.
Quindi, indipendentemente dal dispositivo, sembra sempre bello e nelle giuste proporzioni.
Per semplificarti, aggiungi semplicemente un div attorno all'iframe e assegnagli un nome di classe "iframe-container".
Per esempio:
<classe div="contenitore iframe">
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/9YffrCViTVk” frameborder=”0″ allow=”autoplay; media-crittografato” allowfullscreen></iframe>
</div>
Ed ecco il CSS di cui avrai bisogno per i video di YouTube reattivi:
.contenitore-iframe{
posizione: relativa;
larghezza: 100%;
imbottitura inferiore: 56,25%;
altezza: 0;
}
.iframe-container iframe{
posizione: assoluta;
superiore:0;
a sinistra: 0;
larghezza: 100%;
altezza: 100%;
}
Quindi ora se controlli il sito Web sul cellulare. E anche se modifichi le dimensioni dello schermo, il video rimane nelle stesse proporzioni e risponde alle dimensioni dello schermo.
Opzioni avanzate del lettore video di YouTube
Accelera l'incorporamento di video di YouTube con il caricamento lento
Consiglio avanzato! Se hai più video sulla tua pagina, prova a configurare un plug-in per caricare in modo pigro i video di YouTube.
Ciò renderà il tuo sito Web più veloce da caricare e fornirà un'esperienza migliore al tuo utente. Sto usando un plug-in Lazy Load a3 e funziona benissimo.
Ecco come caricare pigramente un video di YouTube in WordPress:
Youtube Autoplay Embed (funziona su dispositivi mobili iOS e iframe Android)
Alcune volte si desidera riprodurre automaticamente l'incorporamento di video di Youtube. Ti mostrerò prima il modo standard di farlo con un iframe e poi ho incluso un po' di codice che farà funzionare l'autoplay anche su dispositivi mobili, sia IOS che Android!
Userò WordPress, ma funziona esattamente allo stesso modo in HTML.
Per l'incorporamento standard:
Aggiungi questo: ?autoplay=1&mute=1
alla fine dell'URL di incorporamento del video di Youtube. Ma questo funziona solo su desktop.
Per esempio:
<iframe id=”iframeID” width=”560″ height=”315″ src=”https://www.youtube.com/embed/x1XYto1YKTo ?autoplay=1&mute=1 ” frameborder=”0″ allow=”accelerometro; riproduzione automatica; mezzi crittografati; giroscopio; picture-in-picture” allowfullscreen></iframe>
Incorpora script personalizzato:
Prendi lo script che funziona su dispositivi mobili (IOS e Android):
Il codice originale è preso da StackOverflow.
<!-- 1. <iframe> (video player) sostituirà questo tag <div>. -->
<div class="iframe-container">
<div></div>
</div>
<script>
// 2. Questo codice carica il codice API IFrame Player in modo asincrono.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. Questa funzione crea un <iframe> (e un player YouTube)
// dopo il download del codice API.
var giocatore;
funzione suYouTubeIframeAPIReady() {
giocatore = nuovo giocatore YT('giocatore', {
larghezza: '100%',
ID video: 'YOUR_VIDEO_ID',
playerVars: { 'autoplay': 1, 'playsinline': 1 },
eventi: {
'onReady': onPlayerReady
}
});
}
// 4. L'API chiamerà questa funzione quando il video player sarà pronto.
funzione suPlayerReady(evento) {
event.target.mute();
event.target.playVideo();
}
</script>
<stile>
/* Rendi reattivo il video di YouTube */
.contenitore-iframe{
posizione: relativa;
larghezza: 100%;
imbottitura inferiore: 56,25%;
altezza: 0;
}
.iframe-container iframe{
posizione: assoluta;
superiore:0;
a sinistra: 0;
larghezza: 100%;
altezza: 100%;
}
</stile>Se hai notato che per impostazione predefinita l'incorporamento della riproduzione automatica di Youtube non funziona. Ma con un po' di script in più dall'alto. Potrai utilizzare la riproduzione automatica su dispositivi mobili (Chrome e Safari) anche utilizzando un Iframe.
Altre funzionalità avanzate
Come suggerimento bonus, se vuoi sapere come ottenere diverse opzioni di incorporamento come la riproduzione automatica.
Basta andare su Google e cercare il generatore di incorporamento di YouTube.
Mi piace quello di “classynemesis”, ma in fondo sono tutti uguali.
Sul sito, dovrai aggiungere un URL video e potrai aggiungere tutte le diverse opzioni di personalizzazione.
Scegli le funzionalità di cui hai bisogno e quindi copia il codice di incorporamento in alto.
Problemi più comuni con l'incorporamento di YouTube
Il proprietario del video ha disabilitato YouTube Embed
Se riscontri problemi con l'incorporamento di video di YouTube nel tuo sito, di solito è perché l'utente ha disabilitato l'opzione per altri di incorporare quel particolare video. Quindi l'incorporamento non funzionerà.
In tal caso, vedrai questo messaggio:
“Guarda questo video su YouTube. La riproduzione su altri dispositivi è stata disabilitata dal proprietario del video”
In questo caso, non puoi utilizzare questo video specifico. Prova a cercare un altro video simile o comunque devi pensare a qualcos'altro, magari uno screenshot del video che porti l'utente al video?
Perché non riesco a caricare video sul mio WordPress
Dovresti essere in grado di caricare qualsiasi video su WordPress con il pulsante "aggiungi media". Tuttavia, è altamente raccomandato utilizzare YouTube o Vimeo e incorporare il video nel tuo sito.
"Incorporare un video" significa che il video sembra essere sul tuo sito web, ma in realtà è una piccola finestra (iframe) che viene trasmessa in streaming dai server di YouTube o Vimeo.
In questo modo risparmierai molta larghezza di banda e la seccatura di archiviare il video da solo.
Incorpora il video di YouTube su Facebook nel 2018
Sfortunatamente, non è possibile incorporare il video player di YouTube su Facebook nel 2018.
Facebook ha rimosso l'abilità nel 2017 nel tentativo di aumentare la popolarità dei video di Facebook. Quindi non sei in grado di mostrare il player di YouTube sulla timeline di FB.
Il meglio che puoi fare è mostrare una miniatura grande, tuttavia quando qualcuno fa clic su di essa, verrà indirizzato su YouTube. Sotto c'è un'immagine di questo.
Dai un'occhiata alla discussione su Facebook che rimuove questa funzione di incorporamento di YouTube.