HTML iframe 태그

<iframe> 태그를 사용하면 현재 웹페이지 내에 다른 웹페이지를 보여줄 수 있어요. 이렇게 삽입된 웹페이지는 프레임 안에서, 웹페이지의 일부 영역을 차지해요.

예를 들어, 다음과 같은 HTML 코드를 사용하면 다른 웹페이지를 현재 페이지에 삽입할 수 있어요.

https://www.example.com 페이지 표시
<iframe src="https://www.example.com"></iframe>

위의 코드에서 src 속성은 삽입할 웹페이지의 URL 주소를 지정해요.

위 예시는 "https://www.example.com" 웹페이지를 <iframe> 태그 내부에 표시해요.

유튜브에 업로드된 동영상을 웹페이지에 표시하려면, 유튜브에 업로드된 동영상 파일 URL 주소를 알아야 해요.

하지만 웹페이지에 동영상 파일을 직접 포함시키기에는 동영상의 크기가 너무 크고,

유튜브도 콘텐츠 저작권 보호를 위해 동영상 파일 주소를 직접 알려주지 않아요.

하지만 많은 웹페이지에 유튜브 동영상을 보여주고 있죠?

유튜브는 동영상 크기에 대한 부담 없이, 콘텐츠 창작자의 저작권을 보호하면서도 유용한 콘텐츠를 널리 알리기 위해 <iframe> 태그를 제공해요.

예를들어

유튜브 iframe 예시
<iframe
  width="320"
  height="180"
  src="https://www.youtube.com/embed/W0DCi5kwURM"
  title="iframe example"
  allow="fullscreen;"
></iframe>

위와 같은 iframe은 아래와 같이 웹사이트 내 너비(width) 320px, 높이(height) 180px로 유튜브 영상을 표시해요.

여기서 "src"는 유튜브 영상을 오른쪽 클릭하면 나오는 메뉴에서 소스 코드 복사를 누르고, 텍스트 입력창에 복사한 값을 붙여 넣으면 확인할 수 있어요.

또는 https://www.youtube.com/embed/{유튜브영상ID} 형식에 맞추어 {유튜브영상ID}에 영상 ID를 넣으면 돼요.

예를 들어 https://www.youtube.com/watch?v=AY5qcIq5u2g 주소를 가진 유튜브 영상의 고유 ID는 AY5qcIq5u2g에요.

src에 "https://www.youtube.com/embed/AY5qcIq5u2g"와 같이 넣으면 되겠죠?

추가적으로 title="iframe example"은 iframe 요소의 제목을 정하고,

allow="fullscreen;은 유튜브 iframe의 전체화면 버튼을 활성화해요.

이렇게 iframe을 활용해 유튜브 동영상 원본의 주소를 모르더라도, 유튜브에 업로드된 영상을 내 웹페이지에 표시할 수 있어요.

그러면 이제 갤러리의 4번째 그리드 아이템에 유튜브 영상을 넣어볼까요?