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

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

페이지 정보

작성자 관리자1 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
댓글 1건 조회 39,584회 작성일 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

공개 동영상 감사합니다.

134	일반 14912 2013-02-26 08:29 이미지 사이즈 줄이기 (알씨 사용법)
133	일반 18728 2013-02-19 09:19 올바른한글
132	일반 12843 2013-02-16 01:23 What is saiicpl.exe? SAIICpl Application
131	일반 14997 2013-02-16 01:12 What is DLG.exe? Is DLG.exe spyware or a virus?
130	일반 24971 2013-02-16 00:48 jucheck.exe 의 업데이트 팝업이 안뜨게 하는 방법
129	일반 18398 2013-01-31 00:26 ~ 2013-02-02 00:00 도로명+지번주소 우편번호 통합파일
128	일반 12413 2013-01-27 10:51 장애인, 장애우? 맞는 표현은?
127	일반 13851 2012-10-25 20:51 Windows 8에서 미지원 드라이버 설치하기
126	일반 36865 2012-07-04 12:24 클립보드 복사/붙여넣기 오류
125	일반 36440 2012-06-28 00:00 컴퓨터가 부팅되지않고 CPU팬이 돌다 멈추다 무한반복증상
124	일반 12037 2013-07-28 17:33 [달력] 2013년 달력 다운받아 프린트하세요
123	일반 13984 2012-04-22 18:38 소셜 미디어 사이트 아이콘 모음
122	일반 19870 2012-03-21 00:56 ~ 2018-05-25 18:09 웹 서버 종류와 프로그램 알아내기
121	일반 18270 2011-11-14 22:25 ~ 2013-11-24 00:00 [파워포인트] 맞춤법 및 문법 오류 숨기기
120	일반 14084 2011-11-06 01:16 파일과 폴더 작명할때 금지된 단어들
119	일반 14013 2011-11-02 18:37 [HWP] 맞춤법 도우미로 인하여 원고에 붉은 줄이 생길때
118	일반 25532 2011-11-01 23:15 ~ 2011-11-02 00:00 [우편번호] 행안부 제공 매칭테이블 구조
117	일반 22837 2011-10-26 15:19 ~ 2023-11-07 10:53 G Suite Gmail용 MX 레코드 설정하기
116	일반 15151 2011-08-23 00:58 광고전송을 제3자에게 위탁하는 사업자 또는 개인:광고주
열람	일반 39584 2011-08-06 17:43 ~ 2020-06-07 20:24 Youtube 유튜브 동영상 자동재생 및 반복재생방법 댓글1개

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

사이트 내 전체검색