YouTube 비디오를 재생하기 위해 jquery 창을 팝업하는 방법은 무엇입니까?

Question

자동으로 재생하려면이 비디오가 필요합니다. 그것은 좋은,이 코드는 야후 등 다른 소스에서 비디오를 재생할 수 있습니다. 또한 jquery 대신 HTML5를 사용할 수 있습니까?

Answer 1

기능 또는 아마 당신은 당신이 비디오를 표시하기 위해 사용하는 것과 다른 것 팝업 창을 표시하는 데 사용할 플러그인. 이 예에서는 Overlay Plugin from jQuery Tools을 사용하여 모달을 표시 한 다음 swfobject을 사용하여 YouTube Flash Player를 표시했습니다. 또는 동영상을 표시하려면 HTML5 video player with Flash fallback을 사용할 수 있지만 먼저 모달을 팝업해야합니다.

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 1</a> 
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1" 
    class="video-link">Video 2</a> 

<div class="modal" id="video-modal"> 
    <div id="video-container" style="width: 425px; height: 344px;"></div> 
</div> 

<script language="javascript" type="text/javascript"> 

    $(function() { 
     var videoModal = $('#video-modal').overlay({ 
      expose: { 
       color: 'black', 
       loadSpeed: 200, 
       opacity: 0.85 
      }, 
      closeOnClick: true, 
      api: true 
     }); 

     $('.video-link').click(function() { 
      videoModal.load(); 

      var videoUrl = $(this).attr('href'); 
      var flashvars = {}; 
      var params = { 
       allowFullScreen: "true", 
       allowscriptaccess: "always" 
      }; 
      var attributes = {}; 

      swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes); 

      return false; 
     }); 
    }); 

</script> 

Answer 2

FancyBox에 대한 데모를보고 ColorBox

Answer 3

라이트 박스에 이미지와 비디오를 표시하는 순수 자바 스크립트 라이브러리입니다.

목적으로 YouTube 링크에 특별한 "rel"속성을 추가해야 동영상이 팝업 라이트 박스로 열립니다. 그것은 여러 가지 옵션을 제공으로

Answer 4

SimpleModal은 훌륭한 jQuery 플러그인입니다, 외부 콘텐츠를 표시 한 것 :

// Display an external page using an iframe 
var src = "http://365.ericmmartin.com/"; 
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { 
    closeHTML:"", 
    containerCss:{ 
     backgroundColor:"#fff", 
     borderColor:"#fff", 
     height:450, 
     padding:0, 
     width:830 
    }, 
    overlayClose:true 
}); 

Bill Beckelman 사용자 정의 확인 대화 상자로 Asp.Net와 SimpleModal 통합에 대한 자습서의 멋진 시리즈가있다. 그는 훌륭한 클라이언트 측 기능을 만드는 방법과 서버에 다시 게시하는 방법을 보여줍니다. jQuery와 ASP.Net을 가장 잘 통합하는 방법에 대해 머리를 감싸는 데 정말 도움이되었습니다.