[coding] 유튜브 코드에 추가하기

유튜브 반응형 높이에 대한 스크립트를 이야기 하다가 문득 유튜브를 코드에 추가하는 법을 상세하게 다루고 싶어서 포스팅한다.

 

1. 원하는 유튜브 영상 페이지로 간다.

2. 해당 영상 위에서 오른쪽 마우스 > 소스 코드 복사

 

3. 복사해서 붙여넣기 하면 아래와 같은 코드가 붙여넣어질것이다. 

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

autoplay; 옵션은 자동으로 영상을 재생하는 옵션.

 

4. 영상사이즈를 디바이스에 맞게 하기위해 div로 감싼후 스타일을 지정하면된다. 

<div class="video">
	<div class="yt_box play-boxx" data-num="1">
		<iframe width="1105" height="621" src="https://www.youtube.com/embed/V6MSHa0dwbc" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0">
        </iframe>
	</div>
</div>

5. 유튜브 디바이스별 높이 사이즈 정의 스크립트 참고 : 

jintrue.tistory.com/entry/script-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%B0%98%EC%9D%91%ED%98%95-%EB%86%92%EC%9D%B4-%EC%A0%95%EC%9D%98