Redirect to another URL after embedded YouTube video ends

Brandon Tanner · 12-12-2008, 10:49 AM

Anyone know if this can be done by inserting some HTML or Javascript into the embed code? I don't think a time-delayed redirect would be good, as it would redirect some viewers too early (for example those that get hung up with longer video buffering times, etc).

Is there a simple way to detect when the video has finished playing, then redirect based on that?

Thanks

Darren Mothersele · 12-22-2008, 11:47 AM

you can do this if you alter the embed code to use the JW Player rather than the default YouTube player.

You can then attach an "event listener" that fires when the video ends. This listener function can redirect the user to the new page.

Brandon Tanner · 12-22-2008, 12:44 PM

Quote:

Originally Posted by musicinstinct

you can do this if you alter the embed code to use the JW Player rather than the default YouTube player.

You can then attach an "event listener" that fires when the video ends. This listener function can redirect the user to the new page.

Hey musicinstinct,

Thanks for your repsonse. Do you know how to do this? I'll be glad to Paypal someone to do it for me. Shoot me a PM if you're interested.

Darren Mothersele · 12-22-2008, 05:59 PM

Quote:

Originally Posted by Brandon Tanner

Do you know how to do this? I'll be glad to Paypal someone to do it for me. Shoot me a PM if you're interested.

Three steps. It's a bit tricky, so if you can't work this out let me know and I can have a go for you:

1) Use the JW Player Wizard to get your embed code.

Setup Wizard | LongTail Video

Use the example setup called "flvplayer with a youtube video" and in the "file properties" section of flashvars change the file setting to your YouTube URL. You can also change the color or layout of the player if you wish, and set it to autostart under the "Behaviour" options.

2) Click update preview and code to get your player code. This code works along with three other files that are downloaded as part of the JWPlayer bundle. Your page with the code needs to be uploaded along with "swfobject.js", "player.swf", and "yt.swf". You need to change the bit of code that was generated so that swfobject.js and player.swf reference your copies of the files.

3) You can then add the extra "state monitor" code that I have included below. This monitors the "state" of the player and redirects to google.com when it detects that the player has finished:

Code:

  <script type='text/javascript' src='swfobject.js'></script>
  <div id='mediaspace'>This video requires Javascript and Flash</div>
  <script type='text/javascript'>
    var player = null;
    function playerReady(thePlayer) {
      player = document.getElementsByName('ply')[0];
	    addListeners(); 
    }
    function stateMonitor(obj)
    {
      if(obj.newstate == 'COMPLETED')
      {
        // load a new page
        window.location = 'http://www.google.com';
      }
    };
    function addListeners() {
	    if (player) { player.addModelListener("STATE", "stateMonitor"); } 
	    else { setTimeout("addListeners()",100); }
    }
    var s1 = new SWFObject('player.swf','ply','470','320','9','#ffffff');
    s1.addParam('allowfullscreen','false');
    s1.addParam('allowscriptaccess','always');
    s1.addParam('flashvars','file=http://uk.youtube.com/watch%3Fv%3DFgBUqJzgvBo&autostart=true');
    s1.write('mediaspace');
  </script>

p.s. the JW Player - you'll have seen it everywhere - is free for non-commercial use. License for commercial site costs 30 euros. There may be an alternative free player, or there may be a way to do this using YouTube's API... I've only really used the JWPlayer for myself.

Brandon Tanner · 12-22-2008, 09:19 PM

musicinstinct you rock! Just implemented the script and it works like a charm

I'd like to send a little extra Christmas cheer your way.

PM me your Paypal email.

Also, do you do any custom php work? I've got a moderate sized php project I'll be looking to hire someone for soon.

Thanks!

thehypnotist · 01-17-2009, 07:46 PM

Widgetbox › LinkedTube 'Video Links' for YouTube Widget maybe that can help

4morereferrals · 01-18-2009, 02:24 PM

I bit off this topic - but Im intent on using THAT redirect script -pretty sweet!

How to do that on wordpress?

Whats the best way to stream a .wmv file - having firefox issues... I also am planning on converting it to .flv - flash. Is the a good free converter for this that generates decent video? My .wmv source was a recorded gotowebinar - so the quality isnt World Class to start with ... dont want to lose too much more quality.

Any help would be appreciated and Thanks to all here - good stuff!

4morereferrals · 01-18-2009, 07:37 PM

Ive got a little test video on a html page going off my site and that code from Darren above is pretty slick ...

Now ... how to replicate that sweetness in wordpress?

Anyone ?

4morereferrals · 01-22-2009, 12:50 PM

Ive found a WP Plugin and a developer willing to code the Listener event monitoring and end of video redirect code into his sweet little plug in for $50.

Anyone else interested in DONATING to the idea with me?

An example useage for me is ...

I want some one to see my video - but not all the bonus items until it ends - so as to let the video build the sales tension to the point its time to pull out the CC :-)

At the video's end - the site does a redirect to another page - with the same video - look feel layout but with the included bonus items, testimonials displayed and Call to Action.

There's a hundred and 1+ uses - for this, and its a PITA to do it in a wordpress blog.

Unless you guys /gals know a way to do this with JW's FLash Vid player in word press - please help a bruhtha out! I couldnt figure out how to execute the required JS in WP safely. plain html site page - the above code from Darren works a treat. wordpress the ways I tried pukes on it.

PM or reply in here and we'll git r done!

webvideozz · 02-16-2009, 09:34 PM

Hi. I have just checked out FLV Producer. They have developed a WP pugin. You can download their easy, three-step setup software for 97 bucks and additionally you can choose a WP upgrade for $15 extra.

DO NOT pay for a webmaster for something already in the market.

Here is the link:

flvproducer[dot]com
[slash]fullstory[dot]html

Sorry for that, I am new here under some restrictions regardig offering links.
Read along it and right before the checkout, they will give you an offer.

All the best
oliveR

bz1406 · 02-17-2009, 01:19 AM

Thank guys for your tips, it really work with me.

tomson · 04-16-2009, 03:47 PM

Currently in development an application that can have links and buttons on the youtube movie itself - If you would like to offer unique features that you would be happy to have please PM and I will send you a free copy when the first beta version.

Tom

xandycom · 07-29-2009, 12:31 AM

Tomson, YGM. I would be thrilled to be a beta tester for that. Sounds great.

The French Marketer · 12-14-2011, 03:07 PM

Darren,
your post has been very helpful to me. It's quite hard to find the answer to this question on the Web, so thanks again for this effective piece of code !

Quote:

Originally Posted by Darren Mothersele

Three steps. It's a bit tricky, so if you can't work this out let me know and I can have a go for you:

1) Use the JW Player Wizard to get your embed code.

Setup Wizard | LongTail Video

Use the example setup called "flvplayer with a youtube video" and in the "file properties" section of flashvars change the file setting to your YouTube URL. You can also change the color or layout of the player if you wish, and set it to autostart under the "Behaviour" options.

2) Click update preview and code to get your player code. This code works along with three other files that are downloaded as part of the JWPlayer bundle. Your page with the code needs to be uploaded along with "swfobject.js", "player.swf", and "yt.swf". You need to change the bit of code that was generated so that swfobject.js and player.swf reference your copies of the files.

3) You can then add the extra "state monitor" code that I have included below. This monitors the "state" of the player and redirects to google.com when it detects that the player has finished:

Code:

  <script type='text/javascript' src='swfobject.js'></script>
  <div id='mediaspace'>This video requires Javascript and Flash</div>
  <script type='text/javascript'>
    var player = null;
    function playerReady(thePlayer) {
      player = document.getElementsByName('ply')[0];
        addListeners(); 
    }
    function stateMonitor(obj)
    {
      if(obj.newstate == 'COMPLETED')
      {
        // load a new page
        window.location = 'http://www.google.com';
      }
    };
    function addListeners() {
        if (player) { player.addModelListener("STATE", "stateMonitor"); } 
        else { setTimeout("addListeners()",100); }
    }
    var s1 = new SWFObject('player.swf','ply','470','320','9','#ffffff');
    s1.addParam('allowfullscreen','false');
    s1.addParam('allowscriptaccess','always');
    s1.addParam('flashvars','file=http://uk.youtube.com/watch%3Fv%3DFgBUqJzgvBo&autostart=true');
    s1.write('mediaspace');
  </script>

p.s. the JW Player - you'll have seen it everywhere - is free for non-commercial use. License for commercial site costs 30 euros. There may be an alternative free player, or there may be a way to do this using YouTube's API... I've only really used the JWPlayer for myself.

Jono Dsouza · 01-12-2012, 07:06 PM

Hi Darren Mothersele, (or anyone who can help...)

I am using Wordpress and the JW Player WP Plugin to embed video on my blog.

I am trying to trigger a re-direct at the end of the video when it reaches the end so that a new specified page opens instead.

Is there a simple way to do this using the popular plugin (wordpress dot org/extend/plugins/jw-player-plugin-for-wordpress/) with a combination of some code?

I noticed that there is a onComplete(callback) function that can be used using Javascript (see longtailvideo dot com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference#Function)

but is there a simple way to integrate this into my Wordpress page?

Any help is highly appreciated!~

P.S someone sent me this code below, but I don't see how I can use that with my application using just the WP plugin:

<div id='container'>Loading the player ...</div>

<script type='text/javascript'>
jwplayer('container').setup({
flashplayer: '/jwplayer/player.swf',
file: '/uploads/video.mp4',
height: 270,
width: 480,
events: {
onComplete: function(event) {redirectPage('example dot com/')}
}
});

function redirectPage(url){
window.location=url;
}
</script>

12-12-2008, 10:49 AM	#1
Brandon Tanner Advanced Warrior War Room Member Join Date: Jul 2006 Location: USA Posts: 1,612 Thanks: 92 Thanked 385 Times in 116 Posts	Redirect to another URL after embedded YouTube video ends - possible? Anyone know if this can be done by inserting some HTML or Javascript into the embed code? I don't think a time-delayed redirect would be good, as it would redirect some viewers too early (for example those that get hung up with longer video buffering times, etc). Is there a simple way to detect when the video has finished playing, then redirect based on that? Thanks
	Unique New Software For Creating Mobile Website Design "Mockups" CRAZY Fast ... FREE For War Room Members!

12-22-2008, 11:47 AM	#2
Darren Mothersele PHP & Drupal Ninja Join Date: May 2007 Location: London, United Kingdom. Posts: 108 Thanks: 11 Thanked 18 Times in 14 Posts Social Networking Contact Info	Re: Redirect to another URL after embedded YouTube video ends - possible? you can do this if you alter the embed code to use the JW Player rather than the default YouTube player. You can then attach an "event listener" that fires when the video ends. This listener function can redirect the user to the new page.
	Drupal Developer

12-22-2008, 09:19 PM	#5
Brandon Tanner Advanced Warrior War Room Member Join Date: Jul 2006 Location: USA Posts: 1,612 Thanks: 92 Thanked 385 Times in 116 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? musicinstinct you rock! Just implemented the script and it works like a charm I'd like to send a little extra Christmas cheer your way. PM me your Paypal email. Also, do you do any custom php work? I've got a moderate sized php project I'll be looking to hire someone for soon. Thanks!
	Unique New Software For Creating Mobile Website Design "Mockups" CRAZY Fast ... FREE For War Room Members!

01-17-2009, 07:46 PM	#6
thehypnotist Senior Warrior Member Join Date: Nov 2002 Location: , , Norway. Posts: 1,901 Thanks: 0 Thanked 12 Times in 8 Posts Social Networking	Re: Redirect to another URL after embedded YouTube video ends - possible? Widgetbox › LinkedTube 'Video Links' for YouTube Widget maybe that can help

01-18-2009, 02:24 PM	#7
4morereferrals Senior Warrior Member War Room Member Join Date: Dec 2008 Location: Sunny So Cal Posts: 2,368 Thanks: 358 Thanked 400 Times in 269 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? I bit off this topic - but Im intent on using THAT redirect script -pretty sweet! How to do that on wordpress? Whats the best way to stream a .wmv file - having firefox issues... I also am planning on converting it to .flv - flash. Is the a good free converter for this that generates decent video? My .wmv source was a recorded gotowebinar - so the quality isnt World Class to start with ... dont want to lose too much more quality. Any help would be appreciated and Thanks to all here - good stuff!
	30 WP Blogs-30 IPs-Private Network - Index Your Backlinks - Rank Keywords Like Hardcore SEO's Discounted Backlink Energizer WSO $27 Get It Now On Sale Before 2.0 Release Price Increase!

01-18-2009, 07:37 PM	#8
4morereferrals Senior Warrior Member War Room Member Join Date: Dec 2008 Location: Sunny So Cal Posts: 2,368 Thanks: 358 Thanked 400 Times in 269 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? Ive got a little test video on a html page going off my site and that code from Darren above is pretty slick ... Now ... how to replicate that sweetness in wordpress? Anyone ?
	30 WP Blogs-30 IPs-Private Network - Index Your Backlinks - Rank Keywords Like Hardcore SEO's Discounted Backlink Energizer WSO $27 Get It Now On Sale Before 2.0 Release Price Increase!

01-22-2009, 12:50 PM	#9
4morereferrals Senior Warrior Member War Room Member Join Date: Dec 2008 Location: Sunny So Cal Posts: 2,368 Thanks: 358 Thanked 400 Times in 269 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? Ive found a WP Plugin and a developer willing to code the Listener event monitoring and end of video redirect code into his sweet little plug in for $50. Anyone else interested in DONATING to the idea with me? An example useage for me is ... I want some one to see my video - but not all the bonus items until it ends - so as to let the video build the sales tension to the point its time to pull out the CC :-) At the video's end - the site does a redirect to another page - with the same video - look feel layout but with the included bonus items, testimonials displayed and Call to Action. There's a hundred and 1+ uses - for this, and its a PITA to do it in a wordpress blog. Unless you guys /gals know a way to do this with JW's FLash Vid player in word press - please help a bruhtha out! I couldnt figure out how to execute the required JS in WP safely. plain html site page - the above code from Darren works a treat. wordpress the ways I tried pukes on it. PM or reply in here and we'll git r done!
	30 WP Blogs-30 IPs-Private Network - Index Your Backlinks - Rank Keywords Like Hardcore SEO's Discounted Backlink Energizer WSO $27 Get It Now On Sale Before 2.0 Release Price Increase!

02-16-2009, 09:34 PM	#10
webvideozz Warrior Member Join Date: Feb 2009 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? Hi. I have just checked out FLV Producer. They have developed a WP pugin. You can download their easy, three-step setup software for 97 bucks and additionally you can choose a WP upgrade for $15 extra. DO NOT pay for a webmaster for something already in the market. Here is the link: flvproducer[dot]com [slash]fullstory[dot]html Sorry for that, I am new here under some restrictions regardig offering links. Read along it and right before the checkout, they will give you an offer. All the best oliveR

02-17-2009, 01:19 AM	#11
bz1406 Active Warrior Join Date: Feb 2009 Location: http://www.bzminisites.com Posts: 35 Thanks: 0 Thanked 1 Time in 1 Post Social Networking Contact Info	Re: Redirect to another URL after embedded YouTube video ends - possible? Thank guys for your tips, it really work with me.
	Creative Solution For Your Minisite Design \| My Personal Blog

04-16-2009, 03:47 PM	#12
tomson Warrior Member War Room Member Join Date: May 2005 Location: , , USA. Posts: 21 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? Currently in development an application that can have links and buttons on the youtube movie itself - If you would like to offer unique features that you would be happy to have please PM and I will send you a free copy when the first beta version. Tom
	Who Dares - Wins!

07-29-2009, 12:31 AM	#13
xandycom Warrior Member Join Date: Jul 2009 Location: San Antonio, TX Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts Social Networking Contact Info	Re: Redirect to another URL after embedded YouTube video ends - possible? Tomson, YGM. I would be thrilled to be a beta tester for that. Sounds great.

01-12-2012, 07:06 PM	#15
Jono Dsouza Warrior Member Join Date: Oct 2011 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Redirect to another URL after embedded YouTube video ends - possible? Hi Darren Mothersele, (or anyone who can help...) I am using Wordpress and the JW Player WP Plugin to embed video on my blog. I am trying to trigger a re-direct at the end of the video when it reaches the end so that a new specified page opens instead. Is there a simple way to do this using the popular plugin (wordpress dot org/extend/plugins/jw-player-plugin-for-wordpress/) with a combination of some code? I noticed that there is a onComplete(callback) function that can be used using Javascript (see longtailvideo dot com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference#Function) but is there a simple way to integrate this into my Wordpress page? Any help is highly appreciated!~ P.S someone sent me this code below, but I don't see how I can use that with my application using just the WP plugin: <div id='container'>Loading the player ...</div> <script type='text/javascript'> jwplayer('container').setup({ flashplayer: '/jwplayer/player.swf', file: '/uploads/video.mp4', height: 270, width: 480, events: { onComplete: function(event) {redirectPage('example dot com/')} } }); function redirectPage(url){ window.location=url; } </script>