In in response to a request on my other blog post, Remove the title and player controls from YouTube videos, I am posting the instructions for redirecting a YouTube video to a URL after playback. The code below is an example of embedding a YouTube video on your website without a title or player controls. At the end of the video, the page redirects to the page specified in the code. The HTML that you must change is commented.
- View the results of this code on the example page (with a bit of styling added)
- Download the two example files
One is complete with all the playback controls as in the example page, and one is just the video. They both forward to a URL, and the code is commented.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>
YouTube Embedded Player Example page
</title>
<script src=”http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js” type=”text/javascript”></script>
<style type=”text/css”>
body {
font-family: verdana, helvetica;
background-color: white;
}
#timedisplay {
width: 50px;
}
</style>
<script type=”text/javascript”>
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
function setytplayerState(newState) {
updateHTML(“playerstate”, newState);
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById(“myytplayer”);
setInterval(updateytplayerInfo, 250);
updateytplayerInfo();
ytplayer.addEventListener(“onStateChange”, “onytplayerStateChange”);
ytplayer.addEventListener(“onError”, “onPlayerError”);
}
function onPlayerError(errorCode) {
alert(“An error occured: ” + errorCode);
}
function onytplayerStateChange(newState) {
setytplayerState(newState);
}
function updateytplayerInfo() {
updateHTML(“bytesloaded”, getBytesLoaded());
updateHTML(“bytestotal”, getBytesTotal());
updateHTML(“videoduration”, getDuration());
updateHTML(“videotime”, getCurrentTime());
updateHTML(“startbytes”, getStartBytes());
updateHTML(“volume”, getVolume());
}
// functions for the api calls
function loadNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.loadVideoById(id, parseInt(startSeconds));
}
}
function cueNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.cueVideoById(id, startSeconds);
}
}
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}
function getPlayerState() {
if (ytplayer) {
return ytplayer.getPlayerState();
}
}
function seekTo(seconds) {
if (ytplayer) {
ytplayer.seekTo(seconds, true);
}
}
function getBytesLoaded() {
if (ytplayer) {
return ytplayer.getVideoBytesLoaded();
}
}
function getBytesTotal() {
if (ytplayer) {
return ytplayer.getVideoBytesTotal();
}
}
function getCurrentTime() {
if (ytplayer) {
return ytplayer.getCurrentTime();
}
}
function getDuration() {
if (ytplayer) {
return ytplayer.getDuration();
}
}
function getStartBytes() {
if (ytplayer) {
return ytplayer.getVideoStartBytes();
}
}
function mute() {
if (ytplayer) {
ytplayer.mute();
}
}
function unMute() {
if (ytplayer) {
ytplayer.unMute();
}
}
function getEmbedCode() {
alert(ytplayer.getVideoEmbedCode());
}
function getVideoUrl() {
alert(ytplayer.getVideoUrl());
}
function setVolume(newVolume) {
if (ytplayer) {
ytplayer.setVolume(newVolume);
}
}
function getVolume() {
if (ytplayer) {
return ytplayer.getVolume();
}
}
function clearVideo() {
if (ytplayer) {
ytplayer.clearVideo();
}
}
////////////////////////////////////////////////////////////////////////
// +++++++ CHANGE http://www.alvingolf.com/ below (~line 173)
//to your own URL (where you want to forward the video after playback).
////////////////////////////////////////////////////////////////////////
function onytplayerStateChange(newState) {
if(newState == 0) {
window.location.href = ‘http://www.alvingolf.com/’;
}
//alert(“Player’s new state: ” + newState);
}
</script>
</head>
<body id=”page”>
<div>
<!– embed the player –>
<div id=”ytapiplayer”>
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type=”text/javascript”>
// <![CDATA[
// allowScriptAccess must be set to allow the Javascript from one
// domain to access the swf on the youtube domain
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
// this sets the id of the object or embed tag to 'myytplayer'.
// You then use this id to access the swf and make calls to the player's API
////////////////////////////////////////////////////////////////////////////////////
// ++++++++++ CHANGE http://www.youtube.com/v/A0D9w9zoMAU below (~line 204) to the
// link to your YouTube video, and add your own parameters after the "?". The sample
// code autohides the player controls and title. If you don't want to autohide these,
// see the blog post on this subject at www.farrelldoc.com. You must leave the
// "&enablejsapi=1&playerapiid=ytplayer" parameters to make the video forward.
////////////////////////////////////////////////////////////////////////////////////
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/A0D9w9zoMAU?version=3&border=0&enablejsapi=1&playerapiid=ytplayer&autohide=1&showinfo=0",
"ytapiplayer", "425", "344", "8", null, null, params, atts);
//]]>
</script>
<!– HTML below here is for display of the player info + state –>
<div>
Player state: <span id=”playerstate”>–</span>
</div>
<br />
<a href=”javascript:void(0);” onclick=”play();”>Play</a> | <a href=”javascript:void(0);” onclick=”pause();”>Pause</a> | <a href=”javascript:void(0);” onclick=”stop();”>Stop</a> | <a href=”javascript:void(0);” onclick=”mute();”>Mute</a> | <a href=”javascript:void(0);” onclick=”unMute();”>Unmute</a>
<br /><br />
<form action=”" onsubmit=”seekTo(document.getElementById(‘seekto’).value); return false;”>
<div><input type=”submit” value=”Seek to” style=”vertical-align: middle; height: 25px; min-height: 25px;”/><input id=”seekto” type=”text” size=”4″ style=”height:15px; vertical-align: middle;”/></div>
</form>
<br />
<div>
Duration: <span id=”videoduration”>–:–</span> | Current Time: <span id=”videotime”>–:–</span>
</div>
<br />
<div id=”bytesdisplay”>
Bytes Total: <span id=”bytestotal”>–</span> | Start Bytes: <span id=”startbytes”>–</span> | Bytes Loaded: <span id=”bytesloaded”>–</span>
</div>
<br />
<div>
<!—————————————————————–
+++++++++ CHANGE A0D9w9zoMAU below (the value) to the value of your
YouTube video (the last characters of your YouTube link). +++++++++
——————————————————————>
<input type=”text” size=”11″ id=”loadvideoid” value=”A0D9w9zoMAU” />
<a href=”javascript:void(0)” onclick=”loadNewVideo(document.getElementById(‘loadvideoid’).value, document.getElementById(‘startseconds’).value)”>«
Load video</a> | Start at: <input type=”text” size=”4″ id=”startseconds” value=”0″ />
</div>
<br />
<div>
<input id=”vol” type=”text” size=”2″ />
<a href=”javascript:void(0)” onclick=”setVolume(document.getElementById(‘vol’).value)”>« Set Volume</a> | Volume: <span id=”volume”>–</span>
</div>
<br />
<div>
<!—————————————————————–
+++++++++ CHANGE A0D9w9zoMAU below (the value) to the value of your
YouTube video (the last characters of your YouTube link). +++++++++
——————————————————————>
<input type=”text” size=”11″ id=”cuevideoid” value=”A0D9w9zoMAU” />
<a href=”javascript:void(0)” onclick=”cueNewVideo(document.getElementById(‘cuevideoid’).value, document.getElementById(‘startseconds2′).value)”>« Cue video</a> | Start at: <input type=”text” size=”4″ id=”startseconds2″ value=”0″ />
</div>
<br />
<div>
<a href=”javascript:void(0)” onclick=”getEmbedCode()”>Get Embed Code</a> | <a href=”javascript:void(0)” onclick=”getVideoUrl()”>Get Video URL</a> | <a href=”javascript:void(0);” onclick=”clearVideo()”>Clear Video</a>
</div>
</div>
</body>
<!———————————————-
For more web and technical writing tips and
techniques, see www.farrelldoc.com/blog.
————————————————>
</html>
I am trying this on my local system, but the javascript is not able to manipulate or get data from my youtube video. When i try loading my video on your demo page, it works. Any thoughts on what i am missing?
How much have you changed in the example code? Did you download the example code or copy and paste it from this page? Use the download link at the top of the page to download the code. It’s much easier to follow. First, try it with only changing what is necessary:
- On or about line 170, change the URL to the URL to which you want to forward the video.
- On or about line 194, change the YouTube URL to your video (leave the ? and the stuff after it for now).
- On or about line 219, change the value to the value of your YouTube video.
- On or about line 231, change the value to the value of your YouTube video.
Make sure you leave all the quotes. Start from scratch with this download file to see if it works. If it doesn’t work with your video but it does work with my video, then you either made a mistake when you changed the code, or you need to check your video settings on YouTube.
Good luck! Let me know how it goes.
-Karen
I updated the post and the example files. Maybe that will help you.
Thanks Karen! I realized it only works when I have it hosted online. For some reason it doesn’t work on my computer. Thanks again!
You are very welcome! I’m glad that the blog post helped you. My video actually doesn’t play on my laptop (at least in Dreamweaver “Live” mode). It will play locally in my browser. I probably should have mentioned that! I often have issues like we experienced with SWFs. It might have been security settings in your browser or your Flash security settings, but I’m glad you found a workaround.