YouTube 플레이어의 크기를 '보통'크기로 조정하는 방법

Question

이것은 Facebook이하는 것과 비슷하다고 생각합니다.하지만 그들이하는 일을 수행하는 방법을 배웠습니다. , 나는 사과.

아이디어는 썸네일 크기의 플레이어 (width="220px"height="180px")를 클릭하면 '보통'크기로 조정됩니다 (보통의 것은 임의적이지만,이 예를 위해 우리가 함께한다면 width="445px", Youtube 기본값으로 height="364px")를 재생 한 다음 재생됩니다.

나는 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가 링크됩니다. 제 3 자 플러그인을 사용하면이 작업을 쉽게 처리 할 수 ​​있습니다.

모든 도움을 주시면 감사 드리며, 나에게 무엇이 도움이되는지 묻는 것은 유감입니다. 바보 같은 질문 인 것처럼 보입니다. 그것은 이어야합니다.이 분명해야합니다.

미리 감사드립니다.

Answer 1

페이스 북은 플레이어처럼 보이는 썸네일을 사용합니다 .- 깔끔한 속임수. 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

Andy 's Til의 업데이트를 보지 못했기 때문에 이것을 수행하는 상당히 끔찍한 방법을 생각해 냈습니다. (하지만 나는 그의 대답을 받아 들였습니다. 그것이 내 것보다 훨씬 좋았습니다.) 다음 HTML과 콘서트에서 사용

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

:

<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() 코드로. 그것은 유행 후에, 작동한다. 그러나 screenshot -> crop -> video-id.png 방식으로 저장하는 것은 지루한 일입니다. 나는 아마도 내 솔루션을 유지할 것이라고 생각합니다. 아무것도 아닌 경우에는 애처로운 자부심의 문제입니다. 그러나 나는 그것을 jYoutube 접근 방식과 결합하려고 시도 할 것입니다.

그래도 작동하지 않으면 앤디의 대답을 사용하게됩니다.

---

업데이 트로서, 나는 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> 

는 또한, 내가 클릭으로, 희망 역할을해야 <span class="close"><a href="#">x</a></span>를 생성하고 있습니다 -handler를 사용하여 플래시 비디오 객체를 축소하고 원본 .png으로 바꿉니다.

이 ... jQuery를 그것이 $(this).click(); 이벤트를 못하게 왜

때때로 난 그냥 어떤 도움이 감사합니다 ... 나는 중지하는 경우 알고 싶어 ... 해결할 수 있다면 .. . =)