Redirect to a new page at the end of a Youtube video on a WordPress Installation

Redirect to a new page at the end of a Youtube video on a WordPress Installation

We promised ourselves that as and when we overcome hurdles that we would post these results here so that other people can save time and effort by utilizing our solutions. These tips and tricks are from all over the board, and across all the mediums in which we work. Today’s is coding, and is related to both javascript and the YouTube API.

Essentially, the code below allows you to redirect a user to a new URL once a Youtube video has ended.  This involves two things. You have to first make sure your embeds are using the Youtube Javascript API as this is what allows you to set a listener which triggers a redirect at the end of a video. Secondly, this code below specifically relates to people using WordPress as their sites install. This code was created for our website <a href=”https://altsds.co”>AltSounds</a>, where we needed to use this trick to keep the music never-ending for our visitors. There are obviously items that are going to be different in your installs so you’re going to need to use some intuition with regards to how to get this working on your site but it’s a very good jumping off point.

STEP 1: SET THE FORWARDING CODE IN YOUR SINGLE.PHP

Using the Editor, navigate to your SINGLE.PHP page where you would like the redirects to happen. Place this code near where (in your code) that the video code will end up being placed.

<script>

var tag = document.createElement(‘script’);

// This is a protocol-relative URL as described here:
// https://paulirish.com/2010/the-protocol-relative-url/
// If you’re testing a local page accessed via a file:/// URL, please set tag.src to
// “https://www.youtube.com/iframe_api” instead.
tag.src = “//www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 5. The API calls this function when the player’s state changes.
// The function indicates that when a video ends (state=0),
// the page redirects to a certain url
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
window.location.replace(“ENTER LOCATION YOU WANT USER TO BE FORWARDED“);
done = true;
}
}

</script>

STEP 2: CALL THE YOUTUBE API FOR EMBEDS

In order for this to work, you need to change the way you call Youtube video embeds.  You need to be sure also that your WordPress theme supports the required fields.  A custom field that has just the Youtube Video ID in it that can be called in to the code is essential.  As long as the video ID’s are always placed in that same spot this will work.  If you don’t have access to a field like that, you may as well stop here, either that or use the excerpt as your custom field, or whatever sellotape fix you can think of to use a pre-existing field as your VIDEO ID field – to make it work.  There’s also a rudimental check for whether this is being viewed on mobile or desktop and displays the video slightly differently so that the experience is seamless and works across all devices.  We set our video ID to be the smallest size we needed and then using @media tags, changed the size depending on resolution.

<script>

//(ALTSDS.CO) AltSounds: URL Forwarder On Youtube Video End
//This is Frankenstein code, with little bits & pieces being pulled from various places.
//Credit is provided where known.
//Place the <div id=”player”></div> on your content page

var tag = document.createElement(‘script’);

// This is a protocol-relative URL as described here:
// https://paulirish.com/2010/the-protocol-relative-url/
// If you’re testing a local page accessed via a file:/// URL, please set tag.src to
// “https://www.youtube.com/iframe_api” instead.
tag.src = “//www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(‘player’, {
width: ‘400’,
height:’225′,
playerVars: { ‘autoplay’: 1, ‘playsinline’: 1, ‘controls’: 0, ‘modestbranding’: 1, ‘rel’: 0, ‘showinfo’: 0, ‘disablekb’: 1, ‘fs’: 1, ‘enablejsapi’: 1, ‘version’: 3, ‘iv_load_policy’: 3},
videoId: ‘CALL YOUR VIDEO ID HERE‘,
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});}

// The API will call this function when the video player is ready.

function onPlayerReady(event) {

function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
event.target.pauseVideo();
} else {
event.target.playVideo();
}}}

</script>

Now you’ll get served a Youtube embed that can be controlled in lots of different ways, but in this instance is being used as a URL forwarding device at the end of a Youtube video.  But using this method for embedding your YouTube videos you could also set custom controls and move this code further.

We’d love it if anyone can help take this code further by collaborating on it.  One love would be to design a way for this to autoplay on mobile by somehow faking a user interaction or converting videos to MP3’s on the fly so that it could also play on people’s lock screens.  If you have an idea how to code that, we’d love to hear from you!

Collaboration and sharing FTW!