youtube 동영상을 넣을 때 iframe 대신 자바스크립트를 이용하는 방법
- https://developers.google.com/youtube/iframe_api_reference
- https://developers.google.com/youtube/player_parameters
- https://developers.google.com/youtube/js_api_reference
목표: 부트스트랩의 버튼을 클릭하면 유투브 동영상을 modal 창에 띄워 자동으로 재생한다.
1. html 코드
<!-- Button --> <button class="btn btn-primary" data-toggle="modal" data-target="#youtube">Play</button> <!-- Modal --> <div class="modal fade" id="youtube" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div id="youtube-player"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- main modal -->
2. javascript 코드
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$('#youtube').on('shown.bs.modal', function () {
player = new YT.Player('youtube-player', {
height: '488',
width: '867',
videoId: '유투브 동영상 ID',
playerVars: {
modestbranding: '1',
showinfo: '0',
autoplay: '1',
rel: '0'
},
events: {
'onReady': function (event) { event.target.playVideo(); }
}
});
});
$('#youtube').on('hidden.bs.modal', function () {
player.stopVideo();
var parent = $('#youtube-player').parent();
parent.html('<div id="youtube-player"></div>');
});
설명 : ‘Play’버튼을 눌러서 모달창에 유투브 동영상을 재생하다가 ‘Close’ 버튼을 눌러 모달창을 닫아도 크롬이나 사파리에서는 동영상이 계속 재생된다. 이를 위해 ‘Close’버튼을 누르면 동영상을 중지시키고, 유투브 자바스크립트가 만든 다음코드를 원래대로 돌려놓는다.
<iframe id="youtube-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="867" height="488" src="https://www.youtube.com/embed/동영상ID?modestbranding=1&showinfo=0&autoplay=1&rel=0&enablejsapi=1&origin=http%3A%2F%2Flocalhost"></iframe>
출처 : http://blog.dokenzy.com/archives/1679
'# Work > └ html5&css3' 카테고리의 다른 글
모바일웹 아이폰 가로 회전시 폰트가 커지는 문제. (0) | 2015.05.29 |
---|---|
ie에서 html5 & css3 활용하기 (0) | 2015.03.20 |
text-rendering: optimizeLegibility; (0) | 2014.11.24 |
브라우저 크기에 맞게 css 폰트사이즈 유동적으로.. (0) | 2014.11.20 |
모바일 최적화 css3요소들 (0) | 2014.11.12 |