iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게 할방법 있나요?
본문
iframe으로 불러온 동영상을 한페이지에서 동시에 한개만 재생되게하려고 합니다
동영상1 재생중일대 동영상2를 재생클릭 하면은 동여상1은 중지 되고 동영상2만 재생 되게 하고십습니다
<div>
<div>
<iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/t9weuifsIaU?si=FKS23j0F6KqJ4LTJ" style="height:100%;"></iframe>
</div>
<div>
<iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/hTphOKyfc9E?si=NYU4fDAWGmVQGCWX" style="height:100%;"></iframe>
</div>
<div>
<iframe id="video" onload="" scrolling="no" frameborder="0" width="100%" src="https://youtu.be/JiuCxkA2B_I?si=gRSaqYBzF7lGXhdI" style="height:100%;"></iframe>
</div>
</div>
답변 3
자바스크립트를 사용해서 제어하는 방법도 있으니 참고해 보세요
<div>
<div>
<iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/t9weuifsIaU?enablejsapi=1" style="height:100%;"></iframe>
</div>
<div>
<iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/hTphOKyfc9E?enablejsapi=1" style="height:100%;"></iframe>
</div>
<div>
<iframe class="video" scrolling="no" frameborder="0" width="100%" src="https://www.youtube.com/embed/JiuCxkA2B_I?enablejsapi=1" style="height:100%;"></iframe>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var videos = document.getElementsByClassName("video");
var currentPlayer;
// 각 동영상 iframe에 이벤트 리스너 추가
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener("load", function () {
var player = new YT.Player(this, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
}
function onPlayerStateChange(event) {
// 동영상이 재생 중이면
if (event.data == YT.PlayerState.PLAYING) {
// 현재 재생 중인 동영상이 있으면 중지
if (currentPlayer && currentPlayer != event.target) {
currentPlayer.stopVideo();
}
currentPlayer = event.target;
}
}
});
</script>
src="https://youtu.be/t9weuifsIaU?si=FKS23j0F6KqJ4LTJ?autoplay=1&mute=1&loop=1"
autoplay = 자동 재생
mute = 소리
loop = 반복
