유튜브를 배경으로 사용할 때 효율적인 스크립트입니다.

모바일도 강제로 자동재생시키며 무한반복으로 돌어갑니다.

아래에 빨간색은 유튜브 아이디와 동영상의 가로길이입니다. 가로길이는 2번 입력합니다.

<script src="https://www.youtube.com/iframe_api"></script>
<script>
ytID = "TSBGN9VaiMA";
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player("ytPlayer", {
        events: {
            "onReady": (yt) => {
                yt.target.loadVideoById(ytID);
                yt.target.mute();
            },
            "onStateChange": (yt) => { if (yt.data === 0) yt.target.loadVideoById(ytID); }
        }
    });
}
</script>
<style>
#ytDiv { width:960px; display:flex; justify-content:center; overflow:hidden; margin:0 auto; }
#ytDiv div { width:960px; }
#ytDiv div div { position:relative; padding-top:56.25%; overflow:hidden; }
#ytDiv iframe { display:block; position:absolute; top:-150%; width:100%; height:400%; }
#ytDiv div div div { display:block; position:absolute; top:0%; width:100%; height:100%; }
</style>
<div id="ytDiv"><div><div><div id="ytPlayer"></div><div></div></div></div></div>

----------

다음은 모바일에서 양옆을 날리고 가운데 부분만 취하는 방법입니다.

코드는 위와 똑같고 수치 2개만 바꿔주세요.

<script src="https://www.youtube.com/iframe_api"></script>
<script>
ytID = "TSBGN9VaiMA";
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player("ytPlayer", {
        events: {
            "onReady": (yt) => {
                yt.target.loadVideoById(ytID);
                yt.target.mute();
            },
            "onStateChange": (yt) => { if (yt.data === 0) yt.target.loadVideoById(ytID); }
        }
    });
}
</script>
<style>
#ytDiv { width:400px; display:flex; justify-content:center; overflow:hidden; margin:0 auto; }
#ytDiv div { width:1280px; }
#ytDiv div div { position:relative; padding-top:56.25%; overflow:hidden; }
#ytDiv iframe { display:block; position:absolute; top:-150%; width:100%; height:400%; }
#ytDiv div div div { display:block; position:absolute; top:0%; width:100%; height:100%; }
</style>
<div id="ytDiv"><div><div><div id="ytPlayer"></div><div></div></div></div></div>

----------

가로픽셀은 고정값을 주지 마시고 풀화면을 채울 요량이면 스크립트에서 변수로 만들어 처리하세요.

그리고 변수로 만들어 처리할 때는 반드시 onresize 이벤트를 염두어 두거나 클래스를 바꾸는 이벤트를 생각해서 가로모드 세로모드 전환시에 어그러짐이 없어야 합니다.

소스는 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

원본 - https://www.youtube.com/watch?v=TSBGN9VaiMA