Cum să schimbi thumbnail-ul unui videoclip YouTube încorporat?

Question

Cum să schimbi thumbnail-ul unui videoclip YouTube încorporat?

12 dec. 2017, 19:11:06

Vizualizări: 38.2K

Voturi: 3

Când încorporez un videoclip YouTube în pagina mea, există vreo modalitate de a schimba thumbnail-ul afișat (captură de ecran)? Nu am acces de administrator la videoclipul YouTube în cauză.

Aș prefera o soluție fără plugin dacă este posibil. Am găsit aceste instrucțiuni, dar nu au funcționat.

cag8f

2K

încorporare youtube

Comentarii

@Nicolai Mulțumesc pentru asta. Poți să oferi un link către documentația pentru shortcode-ul [video]? Eu încorporez videoclipurile doar prin lipirea URL-ului YouTube pe pagină. Apoi permit funcționalității încorporate din WordPress să convertească acel URL în codul sursă corespunzător. Am avut impresia că folosește shortcode-ul [embed] (dar s-ar putea să greșesc). În orice caz, ceva care să-mi permită să setez thumbnail-ul sună ca fiind exact ceea ce am nevoie.

cag8f

12 dec. 2017 19:16:26

OK, mulțumesc. Am implementat-o și pot schimba thumbnail-ul implicit. Dar vine cu costul unui player de videoclip ușor diferit (comparatie screenshot https://imgur.com/a/QVGKL). Shortcode-ul [video] schimbă player-ul de videoclip într-unul integrat în WordPress, care nu are stilizarea familiară YouTube și de asemenea îi lipsește link-ul de setări și link-ul 'watch in Youtube' (pe care îl apreciez). Ideal, dacă este posibil, aș dori să păstrez totul la fel ca la player-ul YouTube, cu excepția thumbnail-ului. Pot face asta poate cu JavaScript personalizat?

cag8f

12 dec. 2017 19:36:04

OK, mulțumesc. Putem lăsa asta deschis pentru o zi sau două pentru a permite altora să citească/comenteze? Aș putea fi deschis la o soluție prin plugin.

cag8f

12 dec. 2017 19:43:52

Toate răspunsurile la întrebare

Comentarii

Am implementat această soluție (pagina aici http://kabultec.org/blog/events/annual-afghan-womens-benefit-dinner-2017/). Cu aceasta, am reușit să înlocuiesc thumbnail-ul afișat înainte de redarea videoclipului. Dar când videoclipul se termină, afișează din nou thumbnail-ul original de început - exact cel pe care vreau să-l ascund (captură de ecran https://imgur.com/t8N1dPf). Aveți idei cum să rezolv această problemă? Chiar și un ecran negru gol ar fi o soluție în acest caz. Motivul pentru această modificare este să înlocuiesc sau să ascund acest thumbnail specific peste tot pe site.

cag8f

15 dec. 2017 13:45:52

Eliminarea parametrului &rel=0 nu a funcționat, iar eu nu sunt proprietarul acestui canal Youtube. Despre care <div> vorbiți exact? Nu găsesc niciun element cu clasa ytp-cued-thumbnail-overlay (sau similar).

cag8f

16 dec. 2017 11:37:50

OK. Am căutat în codul sursă ytp-cued-thumbnail dar nu l-am găsit (captură de ecran: https://imgur.com/POsfj4r). Nu ar trebui să apară acolo? Sau înțeleg greșit ceva? Puteți să-mi trimiteți o captură de ecran care să indice prezența sa? Nu că nu v-aș crede, dar ar putea să mă ajute să înțeleg unde greșesc.

cag8f

17 dec. 2017 14:37:11

OK. Acea clasă este adăugată pe pagină de către embed-ul YouTube, așa că lipsea de pe pagina mea, deoarece am trecut la shortcode-ul [video]. Dar această nouă soluție mi se pare puțin mai atractivă - adică să păstrez embed-ul YouTube și să schimb thumbnail-ul prin JavaScript. Am revenit la embed-ul YouTube (http://kabultec.org/dev/blog/events/benefit-dinner-2016/) dar am probleme în direcționarea clasei. Mai exact, la încărcarea paginii, document.getElementsByClassName("ytp-cued-thumbnail-overlay-image")[0]; este nedefinit. Dar după ce inspectez elementul, returnează clasa în cauză. Păreri?

cag8f

19 dec. 2017 15:23:19

Poate merită să pun o întrebare separată pe Stack Overflow?

cag8f

19 dec. 2017 15:23:40

Arată celelalte 5 comentarii

verifică asta, poate te va ajuta.


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

dig99

9

29 iul. 2020 11:24:24

Nicolai Grossherr 18.9K · Accepted Answer · 2017-12-12T19:31:08Z

Shortcode-ul [video] poate fi utilizat cu src fiind un URL al unui videoclip de pe YouTube. Pentru a seta o imagine placeholder, o previzualizare thumbnail, utilizați poster, funcționează chiar bine și prin interfața grafică. În final, ar trebui să arate cam ca în exemplul de mai jos.

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

Nicolai Grossherr

18.9K

12 dec. 2017 19:31:08