웹 | 유튜브 전체화면 또는 div 재생시 사용하세요
페이지 정보
작성자 이창민 조회20,745회 댓글0건본문
<style type="text/css"> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper .unclick { display: block; width: 100%; background: rgba(0,0,0,0.0); position: absolute; z-index: 11; top: 0; bottom: 0; } .videoWrapper iframe { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; } </style>
<div class="videoWrapper" id="section0">
<div class="unclick"></div>
<div id="player"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'ksUk3bDGdus',
playerVars: {
autoplay: 1,
playsinline: 1,
loop: 1,
mute: 1,
showinfo: 0,
modestbranding: 0,
rel: 0,
playlist: 'ksUk3bDGdus',
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
전체소스입니다.
video_id 만 변경해서 사용하면 됩니다. unclick 적용해주셔야 클릭도 안됩니다.
* 비메오 유료로 하시면 간단하게 정리됩니다. 한줄로...