유튜브 영상 배경 - Youtube iframe API
유튜브 API를 활용해 섹션 배경으로 유튜브 영상을 재생하도록 구현하고, 영상이 배경처럼 느껴질 수 있도록 위에 약간 투명한 배경 패턴을 깔아준다.
코드
HTML
<section class="youtube">
<div class="youtube__area">
<div id="player"></div>
</div>
<div class="youtube__cover"></div>
<div class="inner">
</div>
</section>
CSS
.youtube {
position: relative;
height: 700px;
background-color: #333;
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
background: orange;
position: absolute;
left: 50%;
margin-left: calc(1920px / -2);
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
content: "";
display: block;
width: 100%;
height: 0;
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;
}
JS
// Youtube IFrame API를 비동기로 로드합니다.
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
// <div id="player"></div>
new YT.Player('player', {
videoId: 'An6LvWQuj_8', // 재생할 유튜브 영상 ID
playerVars: {
autoplay: true, // 자동 재생 유무
loop: true, // 반복 재생 유무
playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
},
events: {
// 영상이 준비되었을 때,
onReady: function (event) {
event.target.mute(); // 음소거
}
}
});
}
Author And Source
이 문제에 관하여(유튜브 영상 배경 - Youtube iframe API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkde8938/유튜브-영상-배경-Youtube-iframe-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)