youtube iframe 연결하여 자동 재생하기

안녕하세요 찐망고입니다.

 

 

전에 ios에서 동영상 재생 관련 포스팅을 했었는데요.

읽어보시는 걸 추천합니다.

iOS 에서 동영상 재생이 안되나요?

 

<video> 요소는 웹 페이지에 비디오를 표시하는 데 사용됩니다.

 

영상을 업로드할 때는 사용하는 코드 

<video autoplay muted loop playsinline>
	<source src="video/mov_bbb.mp4" type="video/mp4">
</video>

 

이 controls속성은 재생, 일시중지, 볼륨과 같은 비디오 컨트롤을 추가합니다. 

 

width 및 height속성을 포함하는 것이 좋은데,

높이와 너비가 설정되지 않으면 비디오가 로드되는 동안 페이지가 깜박일 수 있기 때문입니다.

 <source>요소를 사용하여 비디오 타입을 지정하여 넣을 수 있습니다.

 

비디오가 autoplay(자동으로 재생) 되도록 하려면  muted(음소거)를 지정해야 합니다.

물론 ios저전력모드에선 불가합니다. 

 

 

iframe을 이용하여 youtube영상을 링크걸 때 사용하는 코드 

<iframe src="https://www.youtube.com/embed/9ZzwD3Emz0k?si=HUip3sZ0HTgW3ADm&amp;controls=0&amp;autoplay=1&amp;mute=1&loop=1&amp;playlist=9ZzwD3Emz0k" title="YouTube video player"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<!--
   autoplay=1 (자동재생)
   mute=1 (음소거)
   controls=0 (컨트롤 표시안됨)
   loop=1 (반복재생)
   playlist=id (반복재생시 포함)
-->

 

 

HTML 표준에서는 MP4, WebM 및 Ogg 비디오만 지원됩니다.

 

<div class="video-box">
    <iframe id="youtubePlayer" width="1500" height="784" src="https://www.youtube.com/embed/SQ2ASEBO3Yo?si=Ir2lqJEVmtF3k0t5&controls=0&mute=1&playlist=SQ2ASEBO3Yo&loop=1&modestbranding=1" title="YouTube video player"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>                            
</div>

const playBtn = document.querySelector(".playBtn");
const iframe = document.getElementById("youtubePlayer");

playBtn.addEventListener("click", function() {
    iframe.src = iframe.src + "&autoplay=1";
})

 

임의의 버튼 클릭시 자동재생을 시킬 수도 있습니다.