iframe 사용해서 유튜브 동영상 넣기

iframe(아이프레임) 이란 내부 프레임 이라는

의미로 하나의 HTML 문서내에서 다른

HTML문서를 보여주고자 할때 사용된다.

일반적인 프레임(frame)과 비교해보면

아이프레임은 <frameset> 태그 사이에

올 필요가 없으며 독립적으로 마치<img>태그를

사용하듯 문서내의 원하는 위치에 삽입할 수 있다.

iframe 은 HTML과 더 관련이 있어서

내 블로그 HTML카테고리에 넣고싶지만.

HTML카테고리가 없고 전자정부프레임워크를

사용해서 테스트 해봤기에 그냥

전자정부 프레임워크 카테고리에 글을 올렸다.

먼저 iframe 으로 유튜브 동영상을 넣는법을

알아보자. 방법은 굉장히 쉽다.

먼저 유튜브에 들어가서 사용하고싶은 동영상을 찾자.

다음 동영상에 마우스 우클릭후 소스코드 복사 를 누른다.

다음 복사된 소스 코드를 메모장에 붙여넣는다.

<iframe width="854" height="480"

src="https://www.youtube.com/embed/r5xvtN8DC9A"

frameborder="0" allow="autoplay; encrypted-media"

allowfullscreen></iframe>

소스코드는 대충 위와 같을것이다.

다음 동영상을 붙여넣고 싶은 곳에 <div> 태그와

<iframe> 태그를 넣는다 구조는 아래와 같다.

먼저 간단하게 설명을 하자면 width 와 height는

iframe의 길이를 설정하는 것이다. 영어로 봐도 알것이다.

다음 frameborder는 동영상 넣는것에 쓰이지 않으므로

0으로 설정한다. 다음 중요한것이 src 인데

이부분에 동영상의 주소를 넣어줘야한다.

먼저 위에서 원하는 동영상에서 소스코드를 복사하여

메모장에 붙여넣었으면 그 소스안에

src가 있을것이다. 그 부분을 src 부분에 넣어 채워준다.

하지만 이것이 끝이아니다 src 부분만 그냥 적어두면

동영상이 들어가 지지만 재생버튼을 눌러줘야

영상이 재생될것이다. 이것을 막기위해 autoplay를 쓴다.

동영상의 src를 넣고 위에 "?autoplay=1" 만 붙여 넣어주면

자동으로 재생이된다.

위와같이 설정을 해주면 원하는 페이지에

iframe을 사용해 동영상을 넣어 재생 시킬수 있다.

============================

2018/06/24 추가

요즘 크롬 업데이트 하면서 동영상 자동재생이 막히면서

위 소스대로 하면 크롬에서는 유튜브 영상이 제대로 재생되지 않습니다.

방법은 아직 찾아보지 않았지만, 익스플로어에서는 재생됩니다.

혹시 방법 아시는 분은 댓글에 달아주세요 ㅎㅎ