Youtube video player suggestions?

**igotregistered** · 09-05-2013, 03:12 PM

I'm building a website for a friend. He doesn't want a standard video player with 4 or 5 suggested videos on the side or beneath it like most all players. Instead he wanted to know if I could customize him something like this. I've never done anything like this with a video player. Are there any scripts to do this?

Thank you to all in advance

**djr33** · 09-05-2013, 06:29 PM

You can build something that looks like that with Javascript (or Flash if you want).
However, you can't customize the Youtube player (a Flash object) too much. There are some options, but none that would allow a fundamental change in design.

You can allow the normal player to work as usual, within a layout, including adding a border. But it will have the normal controls inside that. You can have the look you describe by moving the mouse away from the player so that all of the controls disappear while watching the video. But that'll still leave the bar at the bottom. You could cover it up, but then you'd need some way to have those controls (I do think there's a Javascript API, but that could get complicated).

Anyway, you might want to do a search for customizing the youtube player to see what is possible. I'm not sure of the exact limits, but I don't think you can entirely remove everything.

So... yes, and no. Do some more research on this, and then feel free to post again with a more specific question. (In the mean time, someone else might have more to say about this question, but I know that if you have a more specific question, like "how can I put a youtube player in this position", we can help with that. I'm not sure about the overall question here.)

Now, just out of curiosity, what is the origin of that image? Was it scanned/photographed? Did you design a website with a collage? If so, that's creative

I don't think I've seen that before. Anyway, just curious.

**igotregistered** · 09-05-2013, 06:35 PM

Thank you,

I'm actually looking for a player script already coded which would allow embedding that's all. I don't want to customize the youtube player. I just want the player to be customizable and allow embedding code.

The image is cropped from a poster board photo. He had several poster boards made up of what he wanted, why he did it that way I don't know. The guy he paid to create the design created the video player image and that is ultimately what he'd like to see for his video player now.

**djr33** · 09-05-2013, 06:59 PM

Ok, so you are asking how to use Youtube like that, or how to use any video hosting/player like that? There's a big difference.

Of course you could build your own player in Flash, but then you would have to host your videos elsewhere.

**igotregistered** · 09-05-2013, 08:08 PM

I think there's mis communication.

I own and operate two youtube clone websites with thousands of embedded videos which I hot link from my youtube channels via the youtube embed code. After I've uploaded the videos to youtube I take the embed code and embed it at my sports site to be played and watched from there. The embed code is played on my sites own video player which is jwplayer.

I'm not looking to learn how to make a player or host a video.

I'm looking for a script sort of like an image slider where instead of images in the slider, there are embedded videos from youtube. When you click on a slider slide instead of an image popping up in a light box a video will play in the light box.

I don't know how to make one, I'm looking for a script to use which is already to go like the scripts on DD.

**molendijk** · 09-05-2013, 09:44 PM

Try to experiment with this:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<title>YouTube Demo</title>

<style>
body {font-family: arial; font-size: 13px; padding:0px; margin: 0px; background: #dedede; }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://www.youtube.com/player_api"></script>

<script>
// This part of the script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
var controllable_player,
statechange = function(e){
	if(e.data === 0){controllable_player.stopVideo()}

};
function onYouTubeIframeAPIReady() {
controllable_player = new YT.Player('controllable_player', {events: {'onStateChange': statechange}}); 
}
if(window.opera){
addEventListener('load', onYouTubeIframeAPIReady, false);
}
setTimeout(function(){
    if (typeof(controllable_player) == 'undefined'){
        onYouTubeIframeAPIReady();
    }
}, 3000)

</script>

<script>
function load_video(url, sstart, eend)
{start=sstart; end=eend;
maximize();
document.getElementById('the_container').style.display='block'
document.getElementById('controllable_player').style.height='100%'
uurl=url; 
setTimeout("if(controllable_player.loadVideoById){controllable_player.loadVideoById('IBRqwnGferM', 0, 'large')}",0)
setTimeout("controllable_player.loadVideoById({'videoId': uurl, 'startSeconds': start, 'endSeconds': end, 'suggestedQuality': 'large'})",6000)
document.getElementById('stop').style.display='block'
document.getElementById('plus').style.display='block'
document.getElementById('minus').style.display='block'
document.getElementById('info').style.display='block'
document.getElementById('info').innerHTML=info
}

function load_playlist(url_playlist)
{
maximize();
document.getElementById('the_container').style.display='block'
document.getElementById('controllable_player').style.height='100%'
uurl_playlist=url_playlist; 
setTimeout("controllable_player.loadVideoById('IBRqwnGferM')",0); 
setTimeout("controllable_player.loadPlaylist(uurl_playlist)",6000);
setTimeout("controllable_player.setPlaybackQuality('large')",6000)
document.getElementById('stop').style.display='block'
document.getElementById('plus').style.display='block'
document.getElementById('minus').style.display='block'
document.getElementById('info').style.display='block'
document.getElementById('info').innerHTML=info
}

function unload_video()
{
document.getElementById('the_container').style.left='50%';
document.getElementById('the_container').style.top='-100%';
document.getElementById('the_container').style.right='50%';
document.getElementById('the_container').style.bottom='50%';
if(controllable_player.seekTo)controllable_player.seekTo(0);
if(controllable_player.pauseVideo)controllable_player.pauseVideo();
document.getElementById('controllable_player').style.height='1px'
document.getElementById('stop').style.display='none'
document.getElementById('plus').style.display='none'
document.getElementById('minus').style.display='none'
document.getElementById('info').style.display='none'
}

function minimize()
{
document.getElementById('the_container').style.left='35%';
document.getElementById('the_container').style.top='80px';
document.getElementById('the_container').style.right='35%';
document.getElementById('the_container').style.bottom='70%';
}

function maximize()
{
document.getElementById('the_container').style.left='50px';
document.getElementById('the_container').style.top='60px';
document.getElementById('the_container').style.right='50px';
document.getElementById('the_container').style.bottom='160px';
}
</script>

</head>

<body >

<div style="position: absolute; left: 50px; top: 60px; right: 50px; bottom: 110px; background: black; color: white; ">
<div style="position: absolute; top: 50%; left: 50%; margin-left:-80px">Select a video at the bottom</div>
</div>

<div style="position: relative; top: 10px; text-align: center; font-size:30px">YouTube Demo</div>

<div id="the_container" style="display:none;position: absolute; left:40px; top: 0px; right: 40px; bottom: 100px; z-index:20; border: 0px solid red"><div style="position:absolute;z-index:8; width: 100%; height:0px; margin-top: 2px"><div id="stop" style="float: right; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer" onclick="unload_video()">&nbsp;X&nbsp;</div><div id="plus" style="float: right;margin-right:1px; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer" onclick="maximize()">&nbsp;+&nbsp;</div><div id="minus" style="float: right;margin-right:1px; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer; z-index:10" onclick="minimize()">&nbsp;-&nbsp;</div></div><div id="info" style="background:darkred; border: 0px solid silver; border-right: 0px;border-bottom: 0px; width: 100%; color: white; position: absolute; z-index:7; height:50px; text-align: center; padding-top: 10px; padding-bottom: 5px; font-family: arial; font-size:12px;overflow: auto">No info about video</div><br><br><br><iframe id="controllable_player" name="controllable_player" style="position: absolute; height: 100%; width: 100%;z-index:20" src="http://www.youtube.com/watch_popup?v=IBRqwnGferM&amp;vq=large" frameborder="0"></iframe></div>

<div style="position: absolute; width: 560px; left: 50%; margin-left: -280px; bottom: 5px; overflow-x: auto; overflow-y: hidden">

<div style="position:relative; display: inline">
<img src="http://i3.ytimg.com/vi/YpX9eFhV6kg/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; height:95px; width: 180px; border: 1px solid black; cursor: pointer" onclick="info='Homo habilis';load_video('YpX9eFhV6kg')">
</div>

<div style="position:relative; display: inline">
<img src="http://i3.ytimg.com/vi/WVSbl-sNi5Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; height:95px; width: 180px; border: 1px solid black; cursor: pointer" onclick="info='Homo heidelbergensis (in German)<br>Starts at 50 secs, plays for 100 secs';load_video('WVSbl-sNi5Y', 50,150)">
</div>

<div style="position:relative; display: inline">
<img src="http://i3.ytimg.com/vi/sHy9FOblt7Y/mqdefault.jpg"  alt="" title="Click to play video" style="position: relative; height:95px; width: 180px; border: 1px solid black; cursor: pointer" onclick="info='The Neanderthal Flute';load_video('sHy9FOblt7Y')">
</div>

</div>


</body>

</html>

**djr33** · 09-05-2013, 10:25 PM

The trouble will be integrating it with what youtube allows in their TOS.

I own and operate two youtube clone websites with thousands of embedded videos which I hot link from my youtube channels via the youtube embed code.

This is a little worrying in terms of whether we should be helping you to do something that might be against the TOS of youtube. Putting aside any possible issues with the project in general, I'll emphasize that we can't/won't help with any specific things that would directly violate the TOS, such as hiding a required part of the player. I don't know that you've asked for anything like that yet, but there are certain things that while perhaps technically possible won't be supported here for that reason (and would run a serious risk of your website getting blocked by youtube's servers).

**molendijk** · 09-05-2013, 10:58 PM

Originally Posted by djr33

This is a little worrying in terms of whether we should be helping you to do something that might be against the TOS of youtube.

Why do you think he may be doing anything against the YT-TOS, Daniel? The jwplayer is ok. (And btw, the code I posted above just uses URLS given by YT itself, so there won't be a problem there either).

**djr33** · 09-06-2013, 12:22 AM

Youtube is copyrighted. Cloning it is potentially copyright infringement. Creating a video hosting website is not copyright infringement. But cloning youtube is. That's a subtle distinction. Regardless, the bigger problem will be using youtube to host videos that are on another video website. There's nothing wrong with embedding some videos on your website. There is almost certainly something wrong with embedding a lot of videos on your website, using youtube to host them, and trying to thereby compete with youtube. And I expect, in addition to likely issues with the TOS, youtube would do something about this (block the IP, block hotlinking for that website, or pursue legal action). Of course I may have misinterpreted the wording of the original post.

(Arie, your code isn't what I was talking about-- it's perfectly fine to do various things with youtube, but anything that might attempt to hide the youtube logo, for example, could be against the TOS. What could be problematic is, if I interpret it correctly, the original request to create a completely new look for the youtube player. And also the aspect of using this for many videos, rather than just a few on a personal website.)

**igotregistered** · 09-06-2013, 12:47 AM

"Youtube clone". It's a video website, it's the same way everybody explains a video website. They're two pro ice hockey fight sites indexing fights from the past. That's all.