3

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.

Improve this question
3
  • @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
    Commented Dec 12, 2017 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
    Commented Dec 12, 2017 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
    Commented Dec 12, 2017 at 17:43

2 Answers 2

Reset to default
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"]
Improve this answer
10
  • 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
    Commented Dec 15, 2017 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
    Commented Dec 16, 2017 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
    Commented Dec 17, 2017 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
    Commented Dec 19, 2017 at 13:23
  • Maybe this warrants a separate question to Stack Overflow?
    – cag8f
    Commented Dec 19, 2017 at 13:23
0

check this out, maybe this will help.


<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;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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