How to resize YouTube player, from thumbnail size to "normal" size
I think this is similar to what Facebook is doing, but ... I have not worked out how to keep track of what they are doing, and if this is cheating, I apologize.
The idea is to have a thumbnail-sized player ( width="220px"
height="180px"
) that, when clicked, resizes to "normal" size (normal, of course, arbitrary, but for this example, if we go from width="445px"
, the height="364px"
default is Youtube) and then we play.
I am assuming the onClick event should change the height and width properties defined in the <object>
and tags <embed>
, but since the object is flash, I am assuming that the flash player is "grabbing" the clicks rather than reporting them to the browser?
The following video is one that I intend to use and here is a real-world example:
<object class="yt" width="445" height="364">
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
</object>
As an add-on this will most likely be used on a static html page for a short time and will soon be moved to a php site (5.2) and php and html are linked to jQuery 1.3.2, m more than happy to use a third party plugin if one exists to make it easy.
Any help is appreciated, I wish I asked, which can and for me seems to be a dumb question. It should be obvious I think.
Thanks in advance.
source to share
Facebook uses a sketch that just looks like a player - a neat trick. I found a jQuery plugin that can get youtube thumbnails, but I haven't tried that.
Sample code:
<div id="youtoobin">
</div>
<div id="blarg" style="display:none">
<object class="yt" width="445" height="364">
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
</object>
</div>
And JS:
<script>
$(function() {
$("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>");
$("#thumby").live("click", function() {
$("#youtoobin").html($("#blarg").html());
});
});
</script>
I've enabled autoplay as you probably want it if the user clicks on the image. This should be a good starting point for integration into your application. The only thing the jQuery plugin does is get the url for the thumbnail image - you can get a large or small image.
source to share
Since I haven't seen an update from Andy until now, I came up with ... a pretty awful way to do it (but I accepted his answer as it is much nicer than mine).
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function () {
var videoID = $(this).attr("id");
$(this).replaceWith("<object class=\"yt\" width=\"445\" height=\"364\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"445\" height=\"364\"></embed></object>");
});
});
</script>
Used in conjunction with the following html:
<dl>
<dt>Thoughts of Sacrament</dt>
<dd><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" class="yt" /></dd>
<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" class="yt" /></dd>
</dl>
My solution, takes an attribute #id
from the clicked image and then inserts it into the code replaceWith()
. It works after fashion. But screenshot -> crop -> save as the video-id.png approach is tedious to say the least. I think I will probably support my solution - a matter of pathetic pride if nothing else - but I will try to combine that with the jYoutube approach.
If that doesn't work, I'll answer Andy's question.
As an update, I've adapted things to be a little more elegant, with jQuery
animate()
:
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function () {
var videoID = $(this).attr("id");
$(this).animate({
width: "445px",
height: "364px"
}, 600, function() {
$(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object><span class=\"close\"><a href=\"#\">x</a></span>");
});
});
});
</script>
Also, I am generating <span class="close"><a href="#">x</a></span>
which I hope the click handler should handle to compress the lens of the Flash video and replace it with the original one .png
.
That ... if I can work out why jQuery won't let it have an event $(this).click();
...
Sometimes I just wish I knew when to stop ... any help is appreciated ... =)
source to share