HTML 강좌 / audio, video, iframe으로 미디어와 외부 콘텐츠 삽입하기

HTML 강좌

작성일 2026-10-06 최근 수정일 2026-10-25

HTML에서는 audio와 video로 미디어 파일을 재생하고, iframe으로 다른 페이지의 콘텐츠를 삽입할 수 있습니다. 파일 경로, 대체 안내, 자막, 외부 콘텐츠의 신뢰성과 접근성을 함께 고려해야 합니다.

audio와 video로 파일 재생하기

다음 예제는 HTML 파일과 같은 폴더에 sample.mp3, sample.mp4, sample-poster.webp가 있다고 가정합니다. 실제로 실행하려면 사용할 권리가 있는 파일을 준비하고 파일명을 코드에 맞추세요. 미디어도 파일명·상대경로·실제 크기를 맞추는 준비가 필요하며 이미지 넣기: img, alt, 크기와 원리가 같습니다.

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  이 브라우저는 오디오 재생을 지원하지 않습니다.
</audio>

<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-ko.vtt" kind="captions" srclang="ko"
         label="한국어 자막" default>
  이 브라우저는 비디오 재생을 지원하지 않습니다.
</video>

controls는 재생·일시정지 등의 기본 조작 화면을 제공합니다. poster는 동영상 재생 전 보이는 이미지입니다. 대사가 있거나 중요한 소리가 담긴 동영상이라면 정확한 자막 파일을 마련하세요. 예제의 sample-ko.vtt는 실제 파일을 만들거나 준비해야 합니다. 파일이 없으면 자막은 표시되지 않습니다.

자막 파일은 UTF-8 텍스트로 저장하는 WebVTT 형식을 사용할 수 있습니다. 예를 들어 아래 내용을 sample-ko.vtt로 저장하면 첫 3초 동안 자막 한 줄을 표시하는 기본 구조가 됩니다. 실제 동영상에는 말과 중요한 소리를 빠짐없이 옮기고 시간도 영상에 맞춰 조정해야 합니다.

WEBVTT

00:00:00.000 --> 00:00:03.000
작은 정원에 오신 것을 환영합니다.

오디오의 내용이 중요한 경우에는 재생 도구만 제공하지 말고 글로 된 대본도 준비하세요. 자동 재생은 사용자가 예상하지 못한 소리를 낼 수 있으므로 예제처럼 직접 재생하게 두는 편이 안전합니다. 여러 형식을 제공할 때는 source를 추가할 수 있지만, 확장자만 바꾼 같은 파일은 호환 형식이 되지 않습니다.

iframe으로 외부 콘텐츠 삽입하기

iframe은 다른 문서를 현재 페이지 안에 표시합니다. 다음 주소는 예시이며, 실제 서비스가 제공하는 공식 임베드 주소로 바꿔야 합니다.

<iframe
  src="https://example.com/embed/example"
  title="예제 콘텐츠 소개"
  width="640" height="360"
  loading="lazy"></iframe>

title은 삽입된 프레임의 목적을 설명합니다. 외부 사이트가 임베드를 허용하지 않으면 주소가 맞아도 표시되지 않을 수 있습니다. 외부 콘텐츠는 개인정보·쿠키·성능에 영향을 줄 수 있으므로 신뢰할 수 있는 제공자의 공식 임베드 코드를 확인하고 필요한 범위에서만 사용하세요.

example.com 주소는 동작하는 동영상 서비스가 아니라 코드 구조를 보여 주기 위한 자리표시자입니다. 임베드가 보이지 않는다고 해서 iframe 태그가 틀린 것은 아닐 수 있습니다. 실제 제공자의 임베드 주소와 허용 정책을 먼저 확인하세요. 삽입된 콘텐츠가 없어도 핵심 정보를 알 수 있도록 주변 본문에 제목과 맥락을 적는 것이 좋습니다.

너비를 맞추고 로컬 프레임으로 시험하기

HTML의 width="640"만으로는 작은 화면에 맞춰지지 않습니다. 다음 CSS를 HTML 파일의 head 안 style에 넣거나 연결된 스타일시트에 적습니다. video는 원본 비율을 유지하고, 아래 iframe 실습은 16:9 표시 상자를 사용합니다. 다른 임베드 비율이 필요하면 그 조건에 맞춰 값을 바꿉니다.

video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

동영상 파일이 없어도 iframe의 경로·표시·대체 이동을 확인할 수 있습니다. 같은 폴더에 아래 두 파일을 UTF-8로 저장하세요. 실제 외부 서비스나 개인정보를 사용하지 않는 연습입니다.

embed.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>연습 안내</title>
</head>
<body>
  <h1>작은 정원 안내</h1>
  <p>이 문서는 iframe 안에 표시되는 로컬 예제입니다.</p>
</body>
</html>

frame.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>프레임 실습</title>
  <style>
video, iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}
video { height: auto; }
iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
  </style>
</head>
<body>
  <h1>안내 문서 보기</h1>
  <iframe src="embed.html" title="작은 정원 안내 문서" width="640" height="360"></iframe>
  <p><a href="embed.html">안내 문서를 별도 페이지로 열기</a></p>
</body>
</html>

frame.html을 열어 프레임 안의 제목과 문단이 보이는지, 390px 너비에서 프레임이 화면을 넘지 않는지 확인합니다. 별도 페이지 링크도 열어 보세요. 외부 임베드에 바꿔 적용할 때는 제공자의 공식 주소와 허용 정책을 별도로 확인해야 합니다.

WebVTT는 시간 구간과 자막을 담는 텍스트 형식입니다. 로컬 파일에서 자막이 안 나오면 파일 존재·확장자·UTF-8·시간 구간을 먼저 확인한 뒤, HTML·동영상·VTT를 같은 출처의 HTTP 개발 서버에서 제공해 비교하세요. 파일 URL의 보안 제한이나 서버의 형식 응답도 영향을 줄 수 있습니다. 확장자를 바꾸는 것은 미디어 변환이 아닙니다.

<p><a href="sample.mp4">예제 동영상 파일 열기</a></p>
<p><a href="transcript.html">동영상 대본 읽기</a></p>

대체 링크는 실제 준비한 파일과 대본 주소로 바꿉니다. audio/video 태그 안의 대체 문장은 요소를 지원하지 않는 브라우저를 위한 것으로, 지원 브라우저의 파일 로드 실패 때 항상 나타나는 오류 안내가 아닙니다. 필요한 대체 이동과 대본은 예제처럼 요소 밖에서도 제공하세요.

재생되지 않거나 잘릴 때

파일이 실제 경로에 있는지, 서버가 올바른 미디어 형식으로 제공하는지 확인합니다.
브라우저가 해당 파일의 인코딩 형식을 재생할 수 있는지 확인합니다.
좁은 화면에서는 CSS로 최대 너비를 조절하되 영상 비율이 왜곡되지 않는지 확인합니다.
외부 페이지는 임베드 정책과 제공자의 사용 조건을 확인합니다.

속성별 설명은 MDN video 요소 문서와 MDN iframe 요소 문서에서 확인할 수 있습니다. 재생 도구·대체 링크·키보드 조작을 확인할 때는 HTML 접근성 기본: 제목·링크·이미지·키보드의 점검 범위를 함께 적용하세요.

HTML 강좌