1

When I embed a Youtube video onto my page, is there a way to change the thumbnail displayed (screenshot)? I do not have admin access to the Youtube video in-question.

I would prefer a non-plugin solution if possible. I found these instructions, but they did not work.

  • @Nicolai Thanks for that. Can you link documentation regarding the [video] shortcode? I'm embedding merely by pasting the Youtube URL onto the page. Then I allow the WordPress built-in functionality to convert that to the appropriate source code. I was under the impression it used the [embed] shortcode though (but I could be wrong). Regardless, something that allows me to set the thumbnail sounds like what I need. – cag8f Dec 12 '17 at 17:16
  • OK thanks. I implemented it, and can indeed change the default thumbnail. But it comes at a cost of a slightly different video player (screenshot comparison imgur.com/a/QVGKL). The [video] shortcode changes the video player to a built-in WordPress player, which doesn't have the familiar Youtube styling, and is also missing the settings link and 'watch in Youtube' link (which I like). Ideally, if possible, I'd like to keep everything about the Youtube player the same except for the thumbnail. Can I perhaps do so with custom JavaScript? – cag8f Dec 12 '17 at 17:36
  • 1
    OK thanks. Can we leave this open for a day or two to allow other to read/comment? I could perhaps be open to a plugin solution. – cag8f Dec 12 '17 at 17:43
3

The [video] shortcode can be used with the src being an URL of a youtube video. To set a placeholder, preview thumbnail use poster, it even works nicely via GUI. In the end it should look somewhat like the bellow example.

[video src="https://www.youtube.com/watch?v=XYZ" poster="http://example.com/wp-content/uploads/2017/01/example.jpg"]
  • I've implemented this (page here kabultec.org/blog/events/…). With it, have indeed replaced the thumbnail that is displayed before the video plays. But when the video finishes playing, it displays the original starting thumbnail--the same starting thumbnail I want to hide (screenshot imgur.com/t8N1dPf). Any ideas how to resolve that? Even a blank, black screen would be a solution in this case. The motivation for this exercise is to replace or hide this particular thumbnail everywhere on the site. – cag8f Dec 15 '17 at 11:45
  • Removing &rel=0 did not do the trick, and I am not the owner of this Youtube channel. Which <div> are you talking about exactly? I can't find any element with a class of ytp-cued-thumbnail-overlay (or similar). – cag8f Dec 16 '17 at 9:37
  • OK. I searched the source code for ytp-cued-thumbnail but couldn't find it (screenshot: imgur.com/POsfj4r). Shouldn't it appear there? Or am I misunderstanding something? Are you able to send me a screenshot indicating its presence? It's not that I don't believe you, but it might help me figure out where I'm going wrong here. – cag8f Dec 17 '17 at 12:37
  • OK. That class is added to the page by the Youtube embed, so it was missing from my page, since I switched to the [video] shortcode. But this new solution is a bit more appealing to me--i.e. keep the Youtube embed and change the thumbnail via JavaScript. I've reverted back to the Youtube embed (kabultec.org/dev/blog/events/benefit-dinner-2016) but am having trouble targeting the class. Specifically, on page load, document.getElementsByClassName("ytp-cued-thumbnail-overlay-image")[0]; is undefined. But after I inspect the element, it returns the class in-question. Thoughts? – cag8f Dec 19 '17 at 13:23
  • Maybe this warrants a separate question to Stack Overflow? – cag8f Dec 19 '17 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.