HTML iframe 태그

<iframe> 태그를 사용하면 현재 웹페이지 내에 다른 웹페이지를 보여줄 수 있습니다.

이렇게 삽입된 웹페이지는 프레임 안에서, 웹페이지의 일부 영역을 차지하게 됩니다.

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

Copy
<iframe src="https://www.example.com"></iframe>

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

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

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

하지만 웹페이지에 동영상 파일을 직접 포함시키기에는 동영상의 크기가 너무 크고, 유튜브도 콘텐츠 저작권 보호를 위해 동영상 파일 주소를 직접 알려주지 않습니다.

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

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

Copy
<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번째 그리드 아이템에 유튜브 영상을 넣어볼까요?