Disable related videos on a embedded Youtube player
Youtube recently added a new feature to the video player used to embed Youtube videos on other website.
The new default player, once the video completes playing, will display a list of related videos.
While this feature could be useful for some users it is probably not wanted on Youtube video aggregation websites.
Fortunately it's possible to disable related videos.
Let's see how.
The default player
Let's take a cool video (I'm a windsurfing addicted).
The default embed code Youtube suggest us is
<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/Yc_J_kXaFSw"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/Yc_J_kXaFSw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> </object>
Which will generate this:
As you can see, at the end of the video the player will display something like this:
Youtube related videos
Disabling related videos
The trick is to attach to the player URL (http://www.youtube.com/v/Yc_J_kXaFSw) the rel=0 parameter.
The player URL will became http://www.youtube.com/v/Yc_J_kXaFSw&rel=0
Just update the embed code with the new URL:
<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> </object>
The player now looks like:
We don't have more related videos!
Let's use valid XHTML code
Unfortunately the embed code provided by Youtube isn't valid XHTML code and does not pass the W3C's XHTML validation.
This is really bad as creating valid XHTML web pages is valuable and professional. In some countries it is even required by law for public administration websites.
So we can use something like
<!--[if !IE]> <--> <object type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0"> <!--> <![endif]--> <!--[if IE]> <object type="application/x-shockwave-flash" width="425" height="350" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <![endif]--> <param name="movie" value="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0" /> <p>Your browser is not able to display this multimedia content.</p> </object>
The above code, which come from my Drupal video module, is valid XHTML code and works with the most used web browsers.
The above code generate:
Conclusions
You are now able to control the behavior of Youtube player related video and post on your website Youtube videos following XHTML standards.
References
- fabio's blog
- 6797 reads
thanks
i know this article is old but it still great information.
THANKS this is what i looked for
Dear Fabio
indeed this is what i was searching for.
while searching i found the parameters
for automatic starting
&autoplay=1
and looping
&loop=1
the youTube video
does anybody know even more or has a parameter-list?
--
hope they keep it working like this for a while!!
ciao
henrik, berlin, germany
Thanks Henrik for your
Thanks Henrik for your comments and for sharing your finds. Good to know that we can also autoplay and loop youtube videos.
I think that the youtube embeddable player actually have a lot more of paramenter but unfortunately Youtube doesn't provide documentation for them.
Yes.. A Youtube parameter-list might be really useful.
disable links
one other person asked how do you disable links and your answer was that the question wasn't clear so let me ask the same thing but in a different way.
when you embed a Youtube video, by either the way you described or the way youtube suggests, the embedded video has a start button in the center of the video view window. click on it and the video plays. if you mouse over any other part of the video window, you have the little finger. if you click, you are taken to the youtube video channel that that video is from...
how do you disable this link so that only the video plays, but is not a link back to youtube?
thank you in advance,
_Matt
Unfortunately I don't think
Unfortunately I don't think that the embeddable youtube player permits to disable the link you are talking about.
Probably Youtube doesn't permits disabling this link as it want to drive visitors to its website.
you can achieve this with a
you can achieve this with a div and some css.
standard size of a youtube clip is 425px / 355px.
the height of the controlbar (with play/pause button) is 37px. create a div with width = 425px and height = 318px. make sure you position it over the embedded youtube clip - give it a background-color red (#ff0000). that way you can easily check if the clip is completely covered by the div (except for the controlbar ofcourse). now, this div SHOULD have a background color, otherwise the clip will still be clickable. but you can't see the clip! well : simply give it transparency! like this (background-color styling should come first) :
background: #ff0000;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
You also should use the AC_RunActiveContent.js in order for the clip to activate itself ...
Would someone be so kind and
Would someone be so kind and post working example code (div's and css) so I can disable the click through to YouTube when you click a video outside of the "Play" button image, as explained by 'bart venken' in his earlier post above.
Thank you so much.
Example code: disabling Flash link to YouTube on embedded videos
This was a great solution, thanks bart! In response to George's question, here is the code I came up with that works great. I put all the formatting in the stylesheet, so I can just add some div layers quickly in the body of the document.
ALSO, I did NOT use the "autoplay" code, since I have several videos on my page and don't want them to play automatically. In addition, I opted to make a "frame" of div layers, so the user can still click on the center "play" button to start the video. The downside is that after the video is started, the user could still click the center and end up on YouTube, but I think it's an acceptable compromise.
Hopefully this code will post ok. Please note you'll need to change the [ and ] to < and >, respectively. See it work and view the source at www.perfectpocketpets.com. Click on "Thinking about getting a sugar glider" and it will take you to the questions page. You can see it in action there. Enjoy!
- Phillip
####### SAMPLE CODE ########
<style type='text/css'>
.vidOverlayContainer {
position:relative;
width:300px;
height:1px;
}
.vidOverlayTop {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:0px;
left:0px;
width:300px;
height:100px;
background-color:#FF0000;
z-index:3;
}
.vidOverlayLeft {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:100px;
left:0px;
width:125px;
height:30px;
background-color:#0000FF;
z-index:3;
}
.vidOverlayRight {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:100px;
right:0px;
width:125px;
height:30px;
background-color:#0000FF;
z-index:3;
}
.vidOverlayBottom {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:130px;
left:0px;
width:300px;
height:100px;
background-color:#FF0000;
z-index:3;
}
</style>
<div class='vidOverlayContainer'>
<div class='vidOverlayTop'></div>
<div class='vidOverlayLeft'></div>
<div class='vidOverlayRight'></div>
<div class='vidOverlayBottom'></div>
</div>
<object width='300' height='251'... YOUTUBE EMBED CODE CONTINUES HERE...>
####### END SAMPLE CODE #######
Hope that works ok. Enjoy!
awesome find! thanks!
awesome find! thanks!
how do you disable the links
how do you disable the links on youtube videos?
mmm...
This question is not really clear to me.. What do you mean?
thanks
that;s good info. one of my clients i did a video for doesn't want to advertise anybody else!
Post new comment