728x90
반응형
여기서 영상바꿀려면
viedo Id 값을 바꾸면 됩니다.
Id 값은
유튜브영상 -> 공유 -> 에서
src="https://www.youtube.com/embed/dl1IkOkPblw? 에서 embed뒤에 값이 videoId 임 !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>youtube API 사용 자동재생하기</title>
<style>
/* YOUTUBE */
.youtube {
position: relative;
height: 700px;
background-color: #333;
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
background-color: orange;
position: absolute;
left: 50%;
margin-left: calc(1920px / -2);
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
/* 스타일은 html에서 쓰는 것보다 css에서 처리하는게 나아서 youtube__area::before 사용함 */
.youtube .youtube__area::before {
content: "";
display: block;
width: 100%;
padding-top: 56.25%;
}
.youtube .youtube__cover {
/* background-image: url("../images/video_cover_pattern.png"); */
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.youtube .inner {
height: 700px;
}
</style>
</head>
<body>
<!-- YOUTUBE -->
<section class="youtube">
<div class="youtube__area">
<div id="player">
</div>
</div>
</section>
<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.
function onYouTubeIframeAPIReady() { // 함수이름 바꾸면 인식안됨 !
// <div id="player"></div>
new YT.Player('player', {
// 유튜부영상 -> 임베드-> src="https://www.youtube.com/embed/dl1IkOkPblw? 에서 embed뒤에 값이 videoId 임 !
videoId: 'dl1IkOkPblw', // 최초 재생할 유튜브 영상 ID
playerVars: {
autoplay: true, //자동 재생 유무
loop: true, // 반복 재생 유무
playlist: 'dl1IkOkPblw' // 반복재생할 영상 ID 목록
},
events: {
onReady: function (event) {
event.target.mute() // 음소거
}
}
});
}
</script>
</body>
</html>반응형
'IT 꿀정보' 카테고리의 다른 글
| 내 사이트 조회수를 알고싶다면? 구글 애널리틱스 설치방법 (0) | 2024.02.01 |
|---|---|
| 웹기능사 필기정리, 필기시험사이트, 오답정리 (0) | 2024.01.21 |
| cafe24 노드서버 연결하기 / 키할당 (1) | 2024.01.15 |
| [유용한프로그램] 알씨 : 이름 일괄변경, 포맷변경 ! (0) | 2023.12.21 |
| VSCode Github personal token 연동 (0) | 2023.10.04 |
댓글