Как изменить размер игрока YouTube, от размера эскиза до «нормального» размера

Question

Я думаю, это похоже на то, что делает Facebook, но ... Я не разработал, как следует, что они делают, и если это обман , Я приношу извинения.

Идея состоит в том, чтобы иметь игрока в миниатюре (width="220px"height="180px"), который при щелчке изменяет размер до нормального размера (нормальное, конечно, конечно, но для этого примера, если мы идем с width="445px", height="364px" как по умолчанию Youtube), а затем играет.

Я предполагаю, что событие OnClick должно изменить высоту и ширину свойства, определенные в <object> и <embed> тегов, но так как объект флэш-я предполагаю, что «захватывает» флеш-плеер щелчки, а не сообщать о них в браузере ?

Следующее видео является одним из тех, которые я намерен использовать, и здесь, чтобы дать реальный пример:

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

В качестве дополнения, это, вероятно, будет использоваться в статическом HTML странице в скором времени, и вскоре после этого на сайт php (5.2), оба php и html связаны с jQuery 1.3.2, и я более чем счастлив использовать сторонний плагин, если таковой существует, чтобы сделать это легко.

Любая помощь приветствуется, я прошу прощения за то, что может, и для меня, - кажется, является немым вопросом. Это должно быть очевидно, я думаю, должен.

Заранее благодарен.

Answer 1

Facebook использует миниатюру, которая выглядит просто как игрок - аккуратный трюк. Я нашел jQuery plugin, который может получить миниатюры youtube, но я еще не пробовал.

Некоторые примеры кода:

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

И JS:

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

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

Я повернул автозапуск на, так как вы, вероятно, хотите, что если пользователь нажимает на изображение. Это должно стать хорошей отправной точкой для интеграции в ваше приложение. Единственное, что делает плагин jQuery, это получить URL-адрес уменьшенного изображения - вы можете получить большое или маленькое изображение.

Answer 2

Поскольку я не видел обновления от Энди до сих пор, я придумал ... довольно ужасный способ сделать это (но я принял его ответ, так как он намного приятнее, чем мой).

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

Используется совместно со следующим 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> 

Мое решение, принимает атрибут #id с выбранным изображением, а затем вставляет, что в replaceWith() код. Он работает, после моды. Но скриншот -> crop -> сохранить, поскольку подход video-id.png утомительно, мягко говоря. Я думаю, что, вероятно, буду поддерживать свое решение - вопрос патетической гордости, если ничего другого, - но я попытаюсь объединить это с подходом jYoutube.

Если это не сработает, я воспользуюсь ответом Энди.

---

Как обновление, я адаптировано вещи, чтобы быть немного более изящный, с animate() 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> 

Кроме того, я генерируя <span class="close"><a href="#">x</a></span>, который, мы надеемся, должны служить, с щелчком -handler, чтобы сжать объектив Flash-видео обратно и заменить его оригиналом .png.

Это ... если я могу понять, почему JQuery не позволит ему иметь $(this).click(); событие ...

Иногда я просто хочу знать, когда остановиться ... любая помощь приветствуется .. . =)