How to resize a YouTube player, from thumbnail size to 'normal' size...

Question

I guess this is similar to what Facebook does, but...I haven't worked out how to follow what they do and if this is a dupe, I apologise.

The idea is to have a thumbnail-size player (width="220px" height="180px") that, when clicked, resizes to a 'normal' size (normal is arbitrary, of course, but for the sake of this example, if we go with width="445px", height="364px" as the Youtube default) and then plays.

I'm assuming that the onClick event should change the height and width properties defined in the <object> and <embed> tags, but since the object is flash I assume the flash player 'captures' the clicks rather than reporting them to the browser?

The following video is one of those I intend to use, and is here to give a real-world example:

<object class="yt" width="445" height="364">
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&amp;hl=en&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=1"&gt;&lt;/param&gt;
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2ieLb3RAblA&amp;hl=en&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
</object>

As an addenda, this is likely to be used in a static html page for a short while, and be moved to a php (5.2) site shortly afterwards, both php and html have jQuery 1.3.2 linked, and I'm more than happy to use a third-party plugin if such exists to do this easily.

Any and all help is appreciated, I'm sorry for asking what may -and does, to me- appear to be a dumb question. It should be obvious, I guess.

Thanks in advance.

Answer 1

Facebook uses a thumbnail that just looks like a player - neat trick. I found a jQuery plugin that can get youtube thumbnails, I haven't tried it though.

Some 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&amp;hl=en&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=1"&gt;&lt;/param&gt;
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/2ieLb3RAblA&amp;hl=en&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=1&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed>
    </object>
</div>

And the JS:

<script>
    $(function() {
    $("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>");

        $("#thumby").live("click", function() {
            $("#youtoobin").html($("#blarg").html());
        });
    });
</script>

I turned autoplay on since you probably want that if the user is clicking on the image. This should be a good starting point for integrating into your app. The only thing the jQuery plugin does is get the url for the thumbnail image - you can get a large or small image.

Answer 2

Because I didn't see the update from Andy 'til now, I came up with a...fairly horrible way to do this (but I accepted his answer, since it's so 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 concert 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 the #id attribute from the clicked image and then inserts that into the replaceWith() code. It works, after a fashion. But the screenshot -> crop -> save as video-id.png approach is tedious, to say the least. I think I'll probably keep my solution -as a matter of pathetic pride if nothing else- but I'll try and combine that with the jYoutube approach.

If that doesn't work, then I'll be using Andy's answer.

---

As an update, I've adapted things to be a little more graceful, with jQuery's 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'm generating a <span class="close"><a href="#">x</a></span>, which hopefully should serve, with a click-handler, to shrink the flash video-object back down and replace it with the original .png.

This is...if I can work out why jQuery won't let it have a $(this).click(); event...

Sometimes I just wish I knew when to stop... any help is appreciated... =)