Using froogaloop for a custom play button that overlays vimeo video and fades out when clicked?

Question

I'm not great with javascript. I was wondering if it was possible to create something similar to the link below with regards to the play button but I want the play button to overlay the video and when the button is clicked it will fade out and play the video.

http://jsfiddle.net/bdougherty/HfwWY/

HTML

<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen    
allowFullScreen></iframe>

<p><button>Play</button>

JS

var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');

player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});

function onPause(id) {
status.text('paused');
}

function onFinish(id) {
status.text('finished');
}

function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}

Many thanks.

I was wondering how i would change the js just to contain the play button and also to tell it to fade out on click? — user2498890, Nov 06 '13 at 12:06
Yes you can `fadeout` the button which your created but what about the button which is inbuilt on the video?? — Joke_Sense10, Nov 06 '13 at 12:07
oh i see what you mean, I want to actually overlay my own button which will be an image that will fade out on click. — user2498890, Nov 06 '13 at 12:09
I am sure it's not correct.But are you looking for something like this http://jsfiddle.net/HfwWY/1936/ — Joke_Sense10, Nov 06 '13 at 13:12
I actually think this could work i'll just replace the button with a div id that contains the image play button and it should have the same effect. Thanks for your help :) — user2498890, Nov 06 '13 at 13:30
Quick question how comes when i change the fiddle to a div with an id instead of a button inside a p does the fade out work but it doesn't play the video? — user2498890, Nov 06 '13 at 13:43
http://jsfiddle.net/HfwWY/1936/ - have i taken something out i shouldn't have? — user2498890, Nov 06 '13 at 13:51

Using froogaloop for a custom play button that overlays vimeo video and fades out when clicked?

0 Answers0