How To Redirect To Another Page After A YouTube Video Finishes Playing
I was asked by a client if this was possible to redirect to another page after a YouTube video finished playing (and it is). In this post I will teach you how to redirect to another page after a YouTube video finishes playing.
The example below from my homepage video show that.
What It Does
Once a video is started code is added to your WordPress site that monitors for the completion of the video. At that point more code is activated that tells your browser to redirect to another page of your choosing, in my use case I want to send people to the work with me page to request a quote.
Why Do It?
You can add a call to action at the end of your video such as saying “Get a no obligation quote now” and rather than having people click on a button or link, they are automatically taken to that page.
So people see your video message and they are taken directly to another page where they can complete an action. Dynamic call to action, in action 🙂
How It Does It
YouTube has an API which we can tap into.
The videos on your site send signals that can be accessed and one of them is video completed. We monitor for this action with some javascript code and on this event trigger a javascript redirect with the window.location function to redirect to a URL of your choosing.
The Code
To make this work, embed the YouTube video in a post or page in the normal fashion via an iFrame. In the code of your website just before the closing /body tag add the following script
If that last sentence made absolutely no sense scroll down the the wrap up section and check out the done for you part.
Video Embed
<iframe class="player" src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe>
Script
<script>
var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
// first video
player = new YT.Player(‘player’, {
events: {
‘onReady’: function(){ alert(“Ready!”); },
‘onStateChange’: onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
window.location = ‘https://neilmatthews.com/wordpress-technical-support/’;
}
}
</script>
Example
Here’s my home page “work with me” video with a redirect.
Wrap Up – How To Redirect To Another Page After A YouTube Video Finishes Playing
Done for you, if you would like to to setup a video from YouTube on your WordPress site that redirects to another page after it’s completed click on over to the Work With Me page and get a no obligation quote.
Photo Credit: Mitchell Haindfield Flickr via Compfight cc
Doing the seo dance How To Redirect To Another Page After A YouTube Video Finishes Playing
