html, css - 유튜브 동영상 넣기

여기 재생버튼을 누를시 유튜브 동영상이 팝업으로 뜰수 있도록 적용해보자

 

1. 유튜브에서 태그 가져오기

framenorder 속성은 비표준이므로 제거 

공유버튼 클릭

퍼가기 클릭

동영상 퍼가기 소스코드 복사

 

단 이럴경우 자동재생이나 무한 재생이 적용되지않는다. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/jeqdYqsrsA0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

 

---

 

2. 자동재생 autoplay

 

유튜브 옵션은 url뒤에 파라메터(매개변수)를 붙인다.

url?파라메터=값&파라메터=값 형식

 

개발자 샘플 클릭

플레이어 매개변수 표시 클릭

 

좌측 autoplay 체크시 추가된 태그가 나온다.

 

 

---

 

 

3. 음소거 적용 mute

참고링크

https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted

YouTube: How to present embed video with sound muted

 

*자동재생 할때 꼭 음소거(mutd) 태그같이 적용해야 적용됨

autoplay=1&mute=1

 

 

---

 

 

4. 계속재생 loop 

 

계속재생할때 되게 하고싶을때

위와 마찬가지로 유튜브에서 autoplay 방식처럼 체크를 해도 

더이상 지원을 안해서 태그가 나오지 않는다. 

그럴땐 

 

 

&playlist=jeqdYqsrsA0 
playlist 속성값 뒤에 동영상 고유 아이디 넣기

 

 

 

 

아래영상 참조

https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work

 

 

 

 

 

 

 

 

 

 

 

 

---

 

5. 추천영상안뜨게는 안됨 방법없음 

 

 

---

유튜브 완성 태그

자동재생 autoplay /  음소거 적용 mute / 무한반복 재생 loop 

              <iframe width="560" height="315" src="https://www.youtube.com/embed/jeqdYqsrsA0?autoplay=1&mute=1&loop=1&playlist=jeqdYqsrsA0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

 

 

유튜브적용2

https://hyojinny.tistory.com/49?category=1094361

html, css - 유튜브 동영상 2 /모달팝업창 적용