Come ridimensionare un player di YouTube, dalla dimensione delle miniature di dimensioni 'normale'

Question

Credo che questo è simile a quello che fa Facebook, ma ... non ho trovato il modo di seguire quello che fanno e se questa è una vittima, mi scuso.

L'idea è quella di avere un giocatore di miniatura-size (width="220px" height="180px") che, se cliccato, ridimensiona a una dimensione 'normale' (normale è arbitraria, naturalmente, ma per il bene di questo esempio, se andiamo con width="445px" , height="364px" come predefinito Youtube) e poi gioca.

Sto assumendo che l'evento onClick dovrebbe cambiare l'altezza e la larghezza proprietà definite nelle <object> e <embed> tag, ma dal momento che l'oggetto è il flash Suppongo flash player 'cattura' gli scatti piuttosto che riferire al browser?

Il video che segue è uno di quelli che ho intenzione di usare, ed è qui per dare un esempio reale:

<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>

Come un addendum, questo è suscettibile di essere utilizzato in una pagina html statico per un breve periodo, e di essere spostato in una (5.2) sito php poco dopo, sia PHP e HTML hanno jQuery 1.3.2 legato, e io' m più che felice di utilizzare un plugin di terze parti se esiste di farlo facilmente.

Qualsiasi aiuto è apprezzato, mi dispiace per chiedere quello che può -e non, per me- sembra essere una domanda stupida. E ' dovrebbe essere ovvio, credo.

Grazie in anticipo.

Answer 1

Facebook utilizza una miniatura che sembra proprio come un giocatore - trucchetto. Ho trovato un plugin jQuery che può ottenere miniature di YouTube, non l'ho provato, però.

Alcuni codice di esempio:

<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>

E il JS:

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

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

ho acceso autoplay sul dato che probabilmente vuole che se l'utente è quello di cliccare sull'immagine. Questo dovrebbe essere un buon punto di partenza per l'integrazione nella vostra applicazione. L'unica cosa che il plugin jQuery fa è ottenere l'url per l'immagine in miniatura -. È possibile ottenere un'immagine grande o piccolo

Answer 2

Perché non ho visto l'aggiornamento da Andy 'fino ad ora, mi si avvicinò con un ... abbastanza orribile modo per farlo (ma ho accettato la sua risposta, dal momento che è molto più bello di miniera).

        <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>

Utilizzato in concerto con il seguente codice 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>

La mia soluzione, prende l'attributo #id dall'immagine cliccato e quindi inserisce che nel codice replaceWith(). Funziona, in un certo modo. Ma lo screenshot -> crop -> Salva con nome approccio di video-id.png è noioso, a dir poco. Penso che probabilmente mantenere la mia soluzione -come una questione di orgoglio patetico se non altrove, ma ci proverò e che si combinano con l'approccio jYoutube.

Se questo non funziona, allora sarò con la risposta di Andy.

---

Come un aggiornamento, ho adattato le cose ad essere un po 'più elegante, con animate() di jQuery:

<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>

Inoltre, sto generando un <span class="close"><a href="#">x</a></span>, che si spera dovrebbe servire, con un clic-handler, per compattare il video-oggetto un ritorno di fiamma verso il basso e sostituirlo con il .png originale.

Questa è ... se riesco a capire il motivo per cui jQuery non lasciarlo avere un evento $(this).click(); ...

A volte vorrei solo che ho saputo quando smettere ... ogni aiuto è apprezzato ... =)