Click on thumbnail to play youtube video

Question

I'm working on mobile device (iOS) and I want to click on a thumbnail to launch a youtube video. On iOS device the video appears in fullscreen.

I'm using iframe but i want to use only image:

<iframe id="ytplayer" type="text/html" width="120" height="100" src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"/>

How can I do this ?

Thanks

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

The URLs of the thumbnails are predictable:

http://img.youtube.com/vi/[id]/0.jpg

http://img.youtube.com/vi/[id]/1.jpg

http://img.youtube.com/vi/[id]/2.jpg

http://img.youtube.com/vi/[id]/3.jpg

See this answer for more details:

https://stackoverflow.com/a/2068371/318557

edited May 23 '17 at 10:26

Community

1
1

answered Jun 28 '13 at 12:07

MasterScrat

7,090
14
48
80

Thanks , i know that ! I just want to have an examples like : I click on an image (thumbnail or not) and launch my youtube video on my iOS device. – adibouf Jun 28 '13 at 12:11

Jean-Paul · Accepted Answer · 2013-07-03T12:06:28.333

Your HTML:

<iframe id="ytplayer" type="text/html" width="120" height="100"  
src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" 
frameborder="0"/>

The required jQuery:

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      height: '200',
      width: '200',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      events: {
        'onReady': onPlayerReady
      }
    });
}

function onPlayerReady(event){
  event.target.playVideo();
    $("#play").on('click', function() {
      player.playVideo();
    });
    $("#pause").on('click', function() {
      player.stopVideo();
    });
}

Working example:

http://jsfiddle.net/8kN6Z/218/

As you can see, it is very important you add the parameter: &enablejsapi=1 to you src.

Also, the passing of the video id through the initialisation of your player didn't work correctly.

What you want to achieve

What you want to achieve is to start the video by clicking an image (at least if I understand correctly). As you can see in the JsFiddle, I now created a play button which starts the video. You can now substitute an image or anything else you want to initialise the video.

I hope this helps you out!

Good luck!

I think that's because jsfiddle is down :( – Jean-Paul Jul 03 '13 at 12:55 — Jean-Paul, Jul 03 '13 at 12:55
@adibouf: jsfiddle is up again. Try again ;) – Jean-Paul Jul 03 '13 at 13:07 — Jean-Paul, Jul 03 '13 at 13:07
can you check my new question please :s – adibouf Jul 04 '13 at 08:53 — adibouf, Jul 04 '13 at 08:53

Click on thumbnail to play youtube video

2 Answers2