Italiano
it

Come cambiare la miniatura di un video Youtube incorporato?

12 dic 2017, 19:11:06
Visualizzazioni: 38.2K
Voti: 3

Quando incorporo un video Youtube nella mia pagina, c'è un modo per cambiare la miniatura visualizzata (screenshot)? Non ho accesso come amministratore al video in questione.

Preferirei una soluzione senza plugin se possibile. Ho trovato queste istruzioni, ma non hanno funzionato.

incorporare youtube
3
Commenti

@Nicolai Grazie per il suggerimento. Puoi linkare la documentazione riguardante lo shortcode [video]? Sto incorporando semplicemente incollando l'URL di Youtube nella pagina. Poi lascio che la funzionalità integrata di WordPress lo converta nel codice sorgente appropriato. Ero sotto l'impressione che utilizzasse lo shortcode [embed] (ma potrei sbagliarmi). In ogni caso, qualcosa che mi permetta di impostare la miniatura sembra essere ciò di cui ho bisogno.

cag8f cag8f
12 dic 2017 19:16:26

OK grazie. L'ho implementato e posso effettivamente cambiare la miniatura predefinita. Ma ciò ha il costo di un lettore video leggermente diverso (confronto screenshot https://imgur.com/a/QVGKL). Lo shortcode [video] cambia il lettore video in un lettore integrato di WordPress, che non ha lo stile familiare di Youtube, e manca anche del link delle impostazioni e del link 'guarda su Youtube' (che mi piacciono). Idealmente, se possibile, vorrei mantenere tutto uguale al lettore di Youtube tranne che per la miniatura. Posso forse farlo con JavaScript personalizzato?

cag8f cag8f
12 dic 2017 19:36:04

OK grazie. Possiamo lasciare questo aperto per un giorno o due per permettere ad altri di leggere/commentare? Potrei forse essere aperto a una soluzione con plugin.

cag8f cag8f
12 dic 2017 19:43:52
Tutte le risposte alla domanda 2
10
3

Lo [video] shortcode può essere utilizzato con l'attributo src che punta all'URL di un video YouTube. Per impostare un'immagine di anteprima come placeholder, usa l'attributo poster, che funziona perfettamente anche tramite l'interfaccia grafica. Il risultato finale dovrebbe essere simile all'esempio qui sotto.

[video src="https://www.youtube.com/watch?v=XYZ" poster="http://example.com/wp-content/uploads/2017/01/example.jpg"]
12 dic 2017 19:31:08
Commenti

Ho implementato questa soluzione (pagina qui http://kabultec.org/blog/events/annual-afghan-womens-benefit-dinner-2017/). Con questo, ho effettivamente sostituito la miniatura che viene visualizzata prima della riproduzione del video. Ma quando il video termina la riproduzione, mostra nuovamente la miniatura originale di partenza - la stessa miniatura iniziale che voglio nascondere (screenshot https://imgur.com/t8N1dPf). Hai idee su come risolvere questo problema? Anche uno schermo nero e vuoto sarebbe una soluzione in questo caso. La motivazione di questo esercizio è sostituire o nascondere questa particolare miniatura ovunque sul sito.

cag8f cag8f
15 dic 2017 13:45:52

Rimuovere &rel=0 non ha funzionato, e non sono il proprietario di questo canale YouTube. Di quale <div> stai parlando esattamente? Non riesco a trovare alcun elemento con una classe ytp-cued-thumbnail-overlay (o simile).

cag8f cag8f
16 dic 2017 11:37:50

OK. Ho cercato nel codice sorgente ytp-cued-thumbnail ma non sono riuscito a trovarlo (screenshot: https://imgur.com/POsfj4r). Non dovrebbe apparire lì? O sto fraintendendo qualcosa? Sei in grado di inviarmi uno screenshot che ne indichi la presenza? Non è che non ti creda, ma potrebbe aiutarmi a capire dove sto sbagliando.

cag8f cag8f
17 dic 2017 14:37:11

OK. Quella classe viene aggiunta alla pagina dall'embed di YouTube, quindi era mancante nella mia pagina, dato che ho passato al shortcode [video]. Ma questa nuova soluzione mi sembra un po' più allettante - cioè mantenere l'embed di YouTube e cambiare la miniatura via JavaScript. Sono tornato all'embed di YouTube (http://kabultec.org/dev/blog/events/benefit-dinner-2016/) ma ho difficoltà a puntare alla classe. Specificamente, al caricamento della pagina, document.getElementsByClassName("ytp-cued-thumbnail-overlay-image")[0]; è undefined. Ma dopo che ispeziono l'elemento, restituisce la classe in questione. Idee?

cag8f cag8f
19 dic 2017 15:23:19

Forse questo merita una domanda separata su Stack Overflow?

cag8f cag8f
19 dic 2017 15:23:40

OK. Teniamo aperta questa domanda ancora un po' mentre confermo che questa nuova soluzione è fattibile. Aggiornerò questa domanda dopo aver completato la ricerca.

cag8f cag8f
20 dic 2017 11:03:50

Tutti i tuoi commenti in questa discussione sono stati eliminati? Sembra così dal mio lato. Comunque, sembra che non riesca a modificare quella particolare classe con un file JavaScript lato server (vedi qui https://www.reddit.com/r/learnjavascript/comments/7l1cq0/cannot_target_class_unless_i_first_inspect/). Suppongo che potrei provare a sovrapporre un JPG separato su quell'elemento con CSS, ma sembra abbastanza fragile. A meno che tu non veda un'altra possibile soluzione/alternativa, sono propenso a segnare la risposta [video] come quella corretta.

cag8f cag8f
21 dic 2017 11:24:29

@cag8f Sto solo pulendo il rumore. Onestamente non ho un'altra soluzione. Personalmente non mi preoccuperei nemmeno di questo, per essere sincero. Non vale la pena.

Nicolai Grossherr Nicolai Grossherr
21 dic 2017 17:31:57

Non pensavo fossero rumore--pensavo fossero parte di una discussione sana e informativa. Ma vabbè. Segnerò la tua risposta [embed] come quella corretta.

cag8f cag8f
22 dic 2017 10:32:20

@cag8f Non è semplicemente come funziona il sistema qui, non è come un forum aperto. Avrei lasciato la discussione al suo posto – o addirittura fornito un'altra risposta –, se avesse contenuto una soluzione aggiuntiva provata. Ma non lo ha fatto, almeno dal mio punto di vista. E dato che i commenti vengono puliti prima o poi comunque, preferisco pulirli io stesso, piuttosto che lasciare che lo facciano altre persone.

Nicolai Grossherr Nicolai Grossherr
25 dic 2017 01:33:05
Mostra i restanti 5 commenti
0
0

guarda questo, forse ti sarà utile.


<div class="video-responsive"><iframe src="https://www.youtube-nocookie.com/embed/1Cz2Xzm6knM/videoseries?list=PLq-1Cz2Xzm6knM-1Cz2Xzm6knM&amp;rel=0" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
29 lug 2020 11:24:24
Domande correlate
Abilitare Gutenberg su un tipo di post personalizzato
2
risposte
Ottenere gli attributi del prodotto per un Prodotto Semplice in WooCommerce
2
risposte
Come posso risolvere: "Notice: Undefined offset: 0"?
5
risposte
Come visualizzare i post dell'utente/autore corrente in un template di pagina personalizzato?
2
risposte
Dare priorità al foglio di stile del tema child
3
risposte
Rimuovere il link del prodotto Woocommerce
5
risposte