유튜브 동영상 자동실행 소스

유튜브 동영상 자동실행 소스

유튜브를 웹페이지에서 자동실행해보아요.

블로그에서는 예전에 적용되었지만 지금은 자동실행을 막아놨네요. 처음엔 모바일에 안나오다가 지금은 모두 안나오네요. 블로그 방문자가 원하지 않는 동영상을 불필요하게 볼필요는 없으니깐요.

 

웹페이지에 적용하세요.

먼저 유튜브 코드를 복사해오세요.

<iframe width="640" height="360" src="https://www.youtube.com/embed/k24UEMaLwEk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

이 동영상의 소스를 퍼왔습니다.

 

youtu.be/k24UEMaLwEk

 

 

아이프레임 소스에서 유튜브의 url뒤에 ?version-2&autoplay=1를 붙여주세요.
또는 url 뒤에 ?rel=0&autoplay=1를 붙여주세요.

 

<iframe width="640" height="360" src="https://www.youtube.com/embed/k24UEMaLwEk?version-2&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="640" height="360" src="https://www.youtube.com/embed/k24UEMaLwEk?version-2&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

| 유튜브 동영상 음소거 및 자동재생만 하고싶을 때

유튜브 url뒤에 ?autoplay=1&mute=1를 붙이세요.

 

 

| 유튜브 동영상 음소거만 하고싶을 때

유튜브 url뒤에 ?mute=1를 붙이세요.

 

 

| 유튜브 동영상 자동재생만 하고 싶을 때

유튜브 url뒤에 ?autoplay=1를 붙이세요.

 

 

| 유튜브 동영상에 음소거, 자동재생, 무한반복하기

https://www.youtube.com/embed/k24UEMaLwEk

유튜브 url 끝에 있는 파랑색글자처럼 이 텍스트가 해당 유튜브 문자번호에요.

유튜브 url뒤에 ?autoplay=1?rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1;playlist=유튜브 문자번호를 붙이세요.

 

| 유튜브 동영상 자동실행종료 후 다른 광고화면 보이지 않고 계속 무한 반복재생하기 

유튜브 url뒤에  ?rel=0&amp;autoplay=1&amp;loop=1;playlist=유튜부 문자번호를 붙이세요.

 

 

| 동영상 삽입 video 태그 이용하기

video로 태그로 웹페이지에 동영상을 넣어보세요.

<figure class="mmss">

<video loop autoplay muted poster="동영상 재생전에 보여줄 이미지 경로">

<source src="images/mmss.mp4" type="video/mp4">  "이 브라우저는 video 태그를 지원하지 않습니다."

</video>

</figure>

autoplay : 동영상 자동재생

controls : 컨트롤러 보이게 하기
loop : 동영상 반복재생

poster : 동영상 실행전에 보여줄 이미지

multed : 무음 및 자동실행
source : 플로그인 설치없이 동영상 재생, 지원형식에 맞게 재생
- src : 동영상 경로
- type : 동영상 형식 mp4형식일경우 type=video/mp4

"이 브라우저는 video 태그를 지원하지 않습니다." : video 태그를 지원하지 않는 브라우저에 출력됩니다.

 

 

아래 동영상 적용한 학원 포트폴리오 사이트에요. 동영상의 음악은 막스마라 유튜브에서 링크했습니다.

 

MaxMara

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기)

유튜브 동영상 자동실행