0

Is there any way to make a custom thumbnail to my featured video (YouTube-video) in a Wordpress post like this page has (scroll down a bit), and still get YouTube to count the click on the "Play" button as a view? I've heard that YouTube has this kind of functionality, but I'm unable to track it down. Anyone with some kind of knowledge or experience here?

Thanks in advance guys.

Azchezuazche
  • 41
  • 8

1 Answers1

1

A possible way to do that is to insert the video with full width and then put an <img src="yourImage.jpg" /> tag on top with css with your custom image like:

img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Then, with some javascript you could simulate the click to the video when the user clicks the image:

document.querySelector('img').style.display = 'none';
document.querySelector('.ytp-thumbnail-overlay-image').click();

This is just a guidance on how you could do it. The idea is to put an image on top of the video and when it get's clicked, hide it and play the video. Maybe there is some 'official' way to do it with the youtube api but I didn't found it. Let me know if it help and if you need the complete implementation.

Btw the same question has been asked here before in another stackoverflow question that I found by searching on google youtube embed custom preview image

Community
  • 1
  • 1
Merunas Grincalaitis
  • 793
  • 5
  • 10
  • so it would be YOUTUBE EMBED with the document.querySelector('.img').click(); in order to get that exact code to work then? – Azchezuazche May 19 '17 at 05:09
  • you could add the image and the youtube video inside a `div` like this: `
    ` with an id to the img and an id to the video like `youtube-image` and `my-youtube-video` then with javascript you use the `document.querySelector('#my-youtube-video').click()` Remember to hide the image once you execute the click with: `document.querySelector('#youtube-image).style.display = 'none'`, Here is jsfiddle with an example: [JSFIDDLE](http://jsfiddle.net/qgj2ea5e/)     – Merunas Grincalaitis May 19 '17 at 05:42