![[HTML] 자동재생되는 유튜브 영상 넣기(음소거)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnJGPE%2Fbtq9NRswMvM%2FkVkQkaJHXf3cJNC8X9bwR1%2Fimg.png)
반응형
이번 글에서는 Web에서 자동 재생되는 유튜브 영상을 보여주는 방법에 대해 작성하겠습니다!
방법은 간단합니다.
1. 특정 Youtube 영상의 '공유'버튼을 클릭하여 퍼가기 버튼을 클릭하여 코드를 복사한다. (특정 부분만 사용!)
2. Youtube 영상을 표시할 html 파일에서 <body> 내에 아래 코드를 적는다.
<iframe width="가로사이즈" height="세로사이즈" src="https://www.youtube.com/embed/영상키값?rel=0&autoplay=1&mute=1&loop=1;playlist=영상키값" frameborder="0"></iframe>가로, 크기는 자신이 나타내고 싶은 크기로 지정해주고, 위에서 복사한 주소를 영상키값에 넣어주면 됩니다.
여기서 중요한 것은 autoplay=1&mute=1 입니다! autoplay=1만 해줄 경우, 신기하게도 먹히지가 않아요..
그래서 음소거 기능을 켜주는 mute=1 을 추가해줘야 자동 재생이 됩니다.
예를 들면) 위의 유튜브영상의 주소는 'J08a3_dGtmo' 이었으니, 아래와 같이 적어줄 수 있습니다.
<iframe allowfullscreen width="1400" height="800" src="https://www.youtube.com/embed/J08a3_dGtmo?rel=0&autoplay=1&mute=1&loop=1;playlist=J08a3_dGtmo" frameborder="0"></iframe>iframe의 요소
- src : youtube 주소
- frameborder : YouTube를 표시할 때 외곽선 값 (0으로!)
- allowfullscreen : 전체화면 모드를 허용할 것인지 여부
- width : 영상 가로 크기
- height : 영상 세로 크기
3. 끝.
아쉬운 점은 영상이 자동재생과 동시에 음소거가 된다는 점이네요.
이상 글을 마치겠습니다!
반응형
'지식 > Web' 카테고리의 다른 글
| JWT (JSON Web Token) 이해와 구조 (0) | 2022.02.21 |
|---|---|
| 웹 스토리지(Web Storage)란? (0) | 2021.11.23 |
| 동기/비동기(Sync/Async), Blocking/Non-Blocking (0) | 2021.09.17 |
| 서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR) (0) | 2021.08.15 |