CODEWITHSUNDEEP
javascripthtmlyoutube
adibouf
adibouf

Reputation: 171

Click on thumbnail to play youtube video

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

Upvotes: 4

Views: 6677

Answers (2)

Jean-Paul
Jean-Paul

Reputation: 21180

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!

Upvotes: 0

MasterScrat
MasterScrat

Reputation: 7386

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

Upvotes: 0

Related Questions