Log in

View Full Version : 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

http://i40.tinypic.com/2zz2e0w.jpg
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:

<!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
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.
djr33
09-06-2013, 01:43 AM
It's an abstract and complicated issue whether your site is a copyright violation. If you're trying to compete with youtube, then it probably is. If you are simply trying to create an additional website using videos from youtube, it probably is not. (However, for the reasons above I would suggest confirming all of this-- it would be a big waste of time to make a website only to have it shut down due to youtube blocking/suing you.) To be clear, I'm not offering any legal advice/opinions. All I'm concerned with is whether the topic is appropriate for discussion here.

Here are the two issues I see (and are relevant to your original question):
1. You should not create a website that is in competition with youtube while using videos from youtube, embedded in your own site as if they are your videos.
2. Specifically, branding is important. I'm almost certain that part of the requirements for using embedded youtube videos is that it is made clear that they are, in fact, videos from youtube (this is a sort of advertising for them).


If you want to add content around the videos, that's fine. If you want to hide where they come from, that's a problem.
molendijk
09-06-2013, 07:47 AM
It's an abstract and complicated issue whether your site is a copyright violation. If you're trying to compete with youtube, then it probably is. If you are simply trying to create an additional website using videos from youtube, it probably is not. (However, for the reasons above I would suggest confirming all of this-- it would be a big waste of time to make a website only to have it shut down due to youtube blocking/suing you.)
Yes. But there's the youtube-logo on each youtube-video that tells the visitors 'your' videos are in fact youtube-videos. Clicking on the logo leads the visitors to the youtube-site. So I guess that even in the case of a complete youtube-clone, there's no copyright infringement (unless, of course, you hide the logo using javascript).

I'm almost certain that part of the requirements for using embedded youtube videos is that it is made clear that they are, in fact, videos from youtube (this is a sort of advertising for them).
See above (youtube-logo).

If you want to add content around the videos, that's fine. If you want to hide where they come from, that's a problem.
See above (youtube-logo).

What could be problematic is, if I interpret it correctly, the original request to create a completely new look for the youtube player.
I agree. That could be problematic.
igotregistered
09-06-2013, 12:44 PM
Aye yi yi, Nevermind. Do either of you know what hotlinking is? It's not a copyright issue if you claim "NO OWNERSHIP" to said videos. You post a terms of service copyright notification as such. If you claim ownership to one single video you can be prosecuted. I've done this as have hundreds of thousands of others for years, 8 for me. If you "HOST" as in upload and serve video or images, or text or any other original form of media you are immediately infringing on somebody's copyright as you ARE NOW HOSTING said material.

Hotlinking is not hosting, it's called saving on bandwidth. I've provided copywritten archived professional hockey fight video for 2 motion pictures. All of which was paid for by the film and production company's to the National Hockey League for approved licensing. The NHL and about 20 other professional hockey organizations know very well who I am. 7 years ago I was approached by the NHL to investigate my services which I provide. I gave them full access to everything they requested. They found me to be in good standing and not libel for any kind of prosecution due to the fact I am using youtube to host their copywritten material. The NHL takes full ownership of my hotlinked videos and runs advertisements which they collect all proceeds from on my videos.

MAKE SENSE! Christ almighty.
igotregistered
09-06-2013, 12:50 PM
Now.....

My original request says nothing, zero, zilch about re-configuring, designing or changing a youtube player. It asks if there is any kind of player like flowplayer, or jwplayer which support embedding youtube videos in their player. Of which all of the controls and watermarks from youtube are still 100% functional.

If you don't have any suggestions please say so instead of running a Dynamic Drive personal investigation with zero basis.

Thank you
molendijk
09-06-2013, 01:29 PM
My original request says nothing, zero, zilch about re-configuring, designing or changing a youtube player.
Your original request shows an image that might suggest your friend wants you to do just that.

If you don't have any suggestions please say so instead of running a Dynamic Drive personal investigation with zero basis.
In post #6, I actually proposed a code. (I use some variation on it HERE (http://mesdomaines.nu/music/music.html) myself). So I did try to help you. You didn't react on that one.
igotregistered
09-06-2013, 04:50 PM
I've found a script which I can customize to do what I need.
molendijk
09-06-2013, 05:35 PM
Just being curious: where did you find it?
djr33
09-06-2013, 06:31 PM
igotregistered,

I was looking for clarification, since your original posts did not provide enough details to know whether this was a TOS or copyright violation, in which case we would have strict rules about not providing help. When it becomes apparent that there might be a copyright or TOS problem, we ask to find out more because this is important. Thank you for providing clarification.


Hotlinking is not hosting, it's called saving on bandwidth.I know what hotlinking is, and it brings its own problems. By using youtube's servers, you are essentially getting a free ride. Depending on how this is used, you may or may not be following what is allowed in their TOS. Hotlinking in many cases is the big TOS issue (and many sites are blocked due to hotlinking, especially when it comes to images). Hotlinking is not a copyright issue, but it could become a copyright issue when you have borrowed enough content that you are potentially taking business away from and competing with youtube.

The two specific issues are the following:
1. A "youtube clone" that hosts videos from youtube, assuming that it takes traffic away from youtube, is almost certainly a problem. I believe an exception would be a specific topic, such as hockey videos. That was not clear from the original posts, but what you have described since is probably within the range of acceptable use. (Because we aren't lawyers, we are a bit cautious about deciding things like this, and we never can be entirely certain.)
Further, note there are two types of copyright: 1) the original videos [you explained this above], and 2) the rights that youtube has to host the content. In order for your site to be legitimate, both of those aspects must be properly addressed. From what you have said, it sounds like that is the case.

2. Branding. Your original post provided a layout that looks nothing like youtube, yet you want to use it in conjunction with youtube. I have been asking for clarification about whether you want to integrate a still-youtube-branded player into a design like that, or whether you want to strip branding from the player. There is a significant difference. Am I correct in understanding now that you wish to integrate the standard youtube player into a certain position within your design? That's perfectly fine! But I needed to know that.


For the record, your original post did not provide enough information. My original intent was to ask a question and have clarification. This long discussion wasn't the goal.
igotregistered
09-06-2013, 08:52 PM
Just being curious: where did you find it?

A friend of mine referred me to a colleague of his who offered a script of his own which he is customizing for me.