티스토리 뷰
728x90
Youtube 임베딩을 이용해서 내 사이트에 영상을 공유하는 일이 있을 수가 있는데, 유튜브 티가 난다면 싫을 수도 있을 수 있..다!?
그런 경우 어떤 방법으로 해결할 수 있을까?
먼저 CSS를 이용해서 !import를 같은 또는 JS를 이용해서 임베딩된 Youtube UI를 손을 쓸 수가! 없다.
이유는 Cross Origin 문제로 그렇다.Youtube Iframe API를 이용하며 된다.
이미지가 대충 안 맞는데 얼추 맞다. 그래도 가능..!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.playBox {
position: relative;
width: 100%;
height: 100%;
}
img {
display: inline-block;
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
z-index: 100;
}
#player {
position: absolute;
z-index: -1;
}
#START_BTN {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 20%;
background-color: red;
color: white;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div id="playBox">
<div id="player">
</div>
<div id="BTN">
<img src="https://img.youtube.com/vi/pFhFgcmhncM/0.jpg"></div>
<div id="START_BTN">START</div>
</div>
</div>
<script>
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;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'pFhFgcmhncM',
playerVars: {
'rel': 0,
'controls': 0,
'disablekb': 1,
'enablejsapi': 1,
'fs': 0,
'modestbranding': 1,
'origin': 'konaserver.com',
'playsinline': 1
},
events: {
'onStateChange': onPlayerStateChange
}
});
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
document.getElementById('BTN').style.display = 'block';
document.getElementById('START_BTN').style.display = 'block';
}
}
document.getElementById('BTN').addEventListener('click', () => {
document.getElementById('BTN').style.display = 'none';
document.getElementById('START_BTN').style.display = 'none';
player.playVideo();
});
</script>
</body>
</html>반응형
'코딩 관련 > 자바스크립트' 카테고리의 다른 글
| 웹 최적화: Webp 변환 및 미지원 브라우저 대응법 (0) | 2024.08.28 |
|---|---|
| Zustand, Vanilla js에서 사용하여 데이터에 집중하자 (0) | 2024.07.26 |
| 'Vanilla JS X Dom 객체를 이용한 SPA처럼 페이지 만드는 방법' (0) | 2024.06.25 |
| Currying/Partial Application 인수를 하나를 받아, 복잡도를 낮추는 방법 (0) | 2023.10.19 |
| generator function (0) | 2023.10.19 |