Youtube 유튜브 동영상 자동재생 및 반복재생방법 > 기술자료

일반 Youtube 유튜브 동영상 자동재생 및 반복재생방법

페이지 정보

작성자 관리자1 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
댓글 1건 조회 39,242회 작성일 2011-08-06 17:43:48 ~ 2020-06-07 20:24:33

본문

유튜브 동영상(You Tube Video)을 블로그나 카페에 올려서 공유하는 방법은 2가지 방법이 있습니다.
1. 링크만 올리는 경우 (Link to the video)
2. 동영상을 직접 해당 페이지에 삽입하는 방법 (Embed)

1. 유튜브 동영상 퍼오기
위 이미지 처럼 유튜브 동영상을 보면,
① 하단 공유(Share) 버튼이 있습니다. 이것을 누르면 링크주소가 먼저 나오고 다시
② 소스 코드(Embed)를 누른후
③ 이전 소스 코드 사용 체크후
④ 원하는 동영상 화면으로 사이즈를 변경하면
⑤ 블로그나 게시판에 삽입할수 있는 HTML코드가 나옵니다.
이를 복사해서 원하는 웹페이지에 삽입해주면 됩니다.

2. 유튜브 동영상 자동재생
⑤ 에서 복사한 코드 샘플
자동실행 되도록 하려면 &autoplay=1 을 추가합니다.
반복실행 되도록 하려면 &loop=1 을 추가합니다.

<object width="300" height="255"><param name="movie" value="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR" type="application/x-shockwave-flash" width="300" height="255" allowscriptaccess="always" allowfullscreen="true"></embed></object>

<object width="300" height="255"><param name="movie" value="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR&autoplay=1" type="application/x-shockwave-flash" width="300" height="255" allowscriptaccess="always" allowfullscreen="true"></embed></object>

<object width="300" height="255"><param name="movie" value="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR&autoplay=1&loop=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/yH2kyWlWOP4?version=3&hl=ko_KR&autoplay=1&loop=1" type="application/x-shockwave-flash" width="300" height="255" allowscriptaccess="always" allowfullscreen="true"></embed></object>

<embed autostart="true" invokeURLs="false" EnableContextMenu="false" allowScriptAccess="always" allowNetworking="all" enableHtmlAccess="true" AllowHtmlPopupwindow="true" style="width: 300px; height: 255px" src="http://www.youtube.com/v/yH2kyWlWOP4&autoplay=1&loop=1" width="300" height="255" type="application/x-shockwave-flash" loop="1" allowfullscreen="true" amp="amp" version="3&hl=ko_KR=1&autoplay=1&loop=1"></embed>

<embed src="http://www.youtube.com/v/yH2kyWlWOP4?version=3&feature=player_embedded&autoplay=1&loop=1&playlist=yH2kyWlWOP4" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="200" height="150"></embed>

스마트폰 에서는 <obhect ...>...</object> 또는 <embed ...>...</embed>를 사용하면 화면에서 바로 동영상이 작동하지 않습니다.
동영상을 클릭하면 youtube 화면으로 전환된후 작동하네요
youtub 에서 제공하는 <iframe ...>...</iframe> 코드를 사용하면 해당 화면을 유지하면서 동영상을 볼수 있습니다.

<iframe width="300" height="255" src="http://www.youtube.com/embed?listType=playlist&list=PLhFDVCnz-p4aGDHOlthKaJhlQM3sxj54l&rel=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="300" height="255" src="http://www.youtube.com/embed?yH2kyWlWOP4&rel=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. 웹브라우저 자동실행 확인

테스트: https://www.happyjung.com/demo/css/youtube5.html

PC 테스트
Brave 1.9.76 / 자동실행 OK
Chrome 83.0.4103.97 / 자동실행 OK
FireFox 77.01 / 자동실행 X
Internet Explorer 11.719.18362.0 / 자동실행 OK
Microsoft Edge 83.0.478.45 / 자동실행 OK
NAVER Whale 2.7.99.22 / 자동실행 X
Opera / 자동실행 X
Safari 5.1.7 / 자동실행 X

Mac 테스트
Brave   / 자동실행 ?
Chrome   / 자동실행 ?
FireFox   / 자동실행 ?
Microsoft Edge / 자동실행 ?
NAVER Whale   / 자동실행 ?
Opera / 자동실행 ?
Safari / 자동실행 ?

Mobile - iPhone 테스트
Brave 1.17 / 자동실행 X
Chrome 83.0.4103.97 / 자동실행 X
FireFox 77.01 / 자동실행 X
Microsoft Edge 45.4.11 / 자동실행 X
NAVER Whale 1.5.0.2008 / 자동실행 X
Opera Touch 2.3.2 / 자동실행 X
Safari / 자동실행 X

Mobile - Android 테스트
Brave   / 자동실행 ?
Chrome   / 자동실행 ?
FireFox   / 자동실행 ?
Microsoft Edge   / 자동실행 ?
NAVER Whale   / 자동실행 ?
Opera Touch   / 자동실행 ?
Safari / 자동실행 ?

참고자료
http://geniebook.tistory.com/112
http://blog.naver.com/0949119h/100130007629
http://blog.koreadaily.com/sayyesmax/544433
https://developers.google.com/youtube/player_parameters?hl=ko#autoplay
https://www.quora.com/Is-there-a-way-to-get-YouTube-playlist-to-autoplay-in-embedded-player

댓글목록

이규호님의 댓글

이규호 이름으로 검색 작성일 22-09-01 22:49

공개 동영상 감사합니다.

994	전자결제 19699 2011-10-21 15:59 ~ 2011-11-01 00:00 [다날] ClientModule 컴파일 예제 (Linux)
993	전자결제 15284 2011-10-21 15:56 [다날] DLL 등록 가이드
992	ClassicASP 14731 2011-10-11 21:00 [SQL 인젝션] Possible SQL injection in headers
991	MySQL 13838 2011-10-01 19:05 데이타 유형
990	Adobe 15721 2011-09-29 23:48 플래시 CS5에서 이전버전 파일 열었을때 embed font 메시지 끄기
989	JSP 15610 2011-09-29 12:27 ~ 2012-10-09 00:00 include 방법
988	그누보드 13317 2011-09-02 10:12 ~ 2017-09-01 00:00 [G4/G5] 아웃로그인 실명이름 보이기
987	일반 14956 2011-08-23 00:58 광고전송을 제3자에게 위탁하는 사업자 또는 개인:광고주
986	HTML 24447 2011-08-17 19:03 ~ 2017-02-16 00:00 viewport 모바일 화면에서 화면에 보여질 줌 사이즈 및 초기 설정
985	PHP 15983 2011-08-15 20:08 PHP에서 사용되는 타임스탬프(Time Stamp)
열람	일반 39242 2011-08-06 17:43 ~ 2020-06-07 20:24 Youtube 유튜브 동영상 자동재생 및 반복재생방법 댓글1개
983	일반 17590 2011-08-04 23:42 [폰트] 폰트 저작권 내용증명에 대한 답변
982	그누보드 22630 2011-08-04 22:57 [G4] Warning: Cannot modify header information - headers alr…
981	HTML 21187 2011-08-02 21:24 ~ 2020-10-15 15:20 [JS/PHP/ASP] 브라우저 정보로 홈페이지 이동하기
980	WindowsServer 24570 2011-07-28 15:30 HTTP/1.1 새 응용 프로그램 실패
979	WindowsServer 43826 2011-07-26 08:01 ~ 2015-01-30 00:00 64bit IIS에서 32bit 어플리케이션 실행시키기
978	JavaScript 16076 2011-07-26 07:31 [jQuery] 미니달력
977	PHP 15441 2011-07-26 07:10 PHP 서버에 있는 파일유무를 확인할 때
976	JavaScript 38558 2011-07-26 06:59 [jQuery] 달력 10종 세트
975	영카트 16080 2011-07-23 11:01 [YC4] 사용후기 전체모음

Youtube 유튜브 동영상 자동재생 및 반복재생방법 > 기술자료

사이트 내 전체검색