반응형
유투브 영상을 퍼올때 보통은 아래의 이미지처럼 공유의 iframe 소스코드를 복사해서 사용하지만,
자동재생, 음소거 등 다양한 설정을 할 수 없는 부분이 있었습니다.
옵션항목을 제어하기 위해서 유투브 API 코드를 활용할 수 있는데요~
사용방법은 간단합니다.
유투브 동영상을 재생시켜줄 틀 하나 생성해주세요. ex. <div id="player"> </div> <script type="text/javascript"> // 비동기방식으로 아이프레임 플레이어 API 코드를 불러옵니다. var tag = document.createElement('script'); tag.src = "http://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // api 코드 다운로드 후 제어관련 함수 생성. var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '315', width: '560', playerVars: {'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' }, videoId: 'XTIiw37N-_c', events: { 'onReady': onPlayerReady } }); }; // api 음소거 함수호출 function onPlayerReady (event) { event.target.mute(); } </script>
출처 : https://developers.google.com/youtube/iframe_api_reference
반응형
'Web > javascript & jQuery' 카테고리의 다른 글
textarea 글자 수 표시하기 (0) | 2016.03.07 |
---|---|
hoverIntent jQuery Plugin (0) | 2015.12.01 |
앵커 클릭시 부드럽게 스크롤이동 (0) | 2015.08.05 |
특정 타겟으로 부드럽게 스크롤 되는 스크립트 (0) | 2015.07.31 |
컨텐츠 불펌 제한 (0) | 2015.06.30 |