웹사이트 동영상 링크 삽입 HTML - 유튜브 및 비메오 동영상 넣는 방법

HTML로 유튜브·비메오 동영상 삽입하는 법과 반응형 적용 팁까지 정리

2025년 현재, 웹사이트나 블로그에 유튜브·비메오 동영상을 삽입하는 HTML 코드 활용은 여전히 콘텐츠 제작자들에게 필수적인 스킬입니다. 특히 워드프레스, 티스토리, 개인 포트폴리오 웹사이트, 기업용 랜딩 페이지 등 다양한 환경에서 영상 콘텐츠를 직접 넣는 방법은 사용자 경험(UX) 향상과 체류 시간 증가에도 큰 도움이 됩니다.

그럼 유튜브와 비메오 동영상의 퍼가기(embed) 코드 사용법부터, 반응형 웹을 위한 HTML 구조, 그리고 영상 크기 조절 및 자동재생 설정 방법까지 누구나 쉽게 따라할 수 있도록 정리해보았습니다. HTML 태그에 익숙하지 않더라도, 본문에 제공되는 코드 예제를 그대로 복사해 사용하면 다양한 환경에서 안정적으로 동영상을 삽입할 수 있습니다.

유튜브 동영상 링크 삽입하기

 유튜브에서 원하는 동영상을 선택한 후, '공유' 버튼을 클릭하면 '퍼가기' 옵션이 보입니다.

이곳에서 제공되는 코드를 복사하여 웹사이트의 HTML 코드에 붙여넣으면 됩니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

여기서 "동영상ID" 부분은 각 동영상의 고유한 ID로, 유튜브 링크에서 확인할 수 있습니다.

비메오 동영상 링크 삽입하기

비메오에서도 마찬가지로 원하는 동영상을 선택한 후, '공유' 버튼 (또는 비슷한 아이콘)을 클릭합니다. 그 후, 'Embed' 부분에 제공되는 코드를 복사하여 웹사이트의 HTML 코드에 붙여넣으면 됩니다.

<iframe src="https://player.vimeo.com/video/동영상ID" width="640" height="360" frameborder="0" allowfullscreen></iframe>

 "동영상ID" 부분은 각 동영상의 고유한 ID로, 비메오 링크에서 확인할 수 있습니다.

이렇게 업로드하고자 하는 동영상의 HTML 주소를 확인했다면 게시판에 업로드 시 HTML 소스아이콘을 선택합니다.

이후 복사한 동영상 HTML 주소를 넣어주면 유튜브나 비메오 등 인터넷 스트리밍에 있는 주소를 링크로 추가할 수 있습니다.

동영상 크기 조절하기

동영상의 크기를 원하는대로 조절하려면, `width`와 `height` 값을 조절하면 됩니다.

동영상 크기조절 HTML

동영상 크기를 100%로 설정:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

 동영상 크기를 75%로 설정:

<iframe width="75%" height="236" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

이처럼, 원하는 크기 비율에 맞게 `width`와 `height` 값을 조절하면 원하는 대로 동영상의 크기를 설정할 수 있습니다.

이제 웹사이트에 동영상을 쉽게 삽입하고, 크기를 원하는 대로 조절하는 방법에 대해 알아보았으며 이를 통해 웹사이트에 쉽게 동영상 HTML 사용해 추가하거나 크기를 조절할 수 있습니다.

네이버블로그 카페 동영상 다운로드 인터넷 저장방법

유튜브 동영상 삽입 시 자동재생 설정은 어떻게 하나요?

src URL 뒤에 ?autoplay=1을 추가하면 자동재생됩니다.

<iframe src="https://www.youtube.com/embed/동영상ID?autoplay=1" ...></iframe>

단, 대부분의 브라우저는 음소거 상태가 아닌 자동재생을 차단하므로 &mute=1도 함께 넣는 것이 안정적입니다.

동영상 시작 지점을 지정하고 삽입할 수 있나요?

가능합니다. 유튜브의 경우 ?start=초단위 파라미터를 사용하면 됩니다.

<iframe src="https://www.youtube.com/embed/동영상ID?start=60" ...></iframe>

이렇게 하면 영상이 1분(60초)부터 재생됩니다.

반응형 웹에 맞는 유튜브·비메오 동영상 삽입은 어떻게 하나요?

고정 크기가 아닌 CSS 기반의 비율 박스로 만드는 것이 반응형에 적합합니다.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/동영상ID" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" allowfullscreen></iframe>
</div>

이 방법은 화면 크기에 따라 자동으로 비율을 유지하면서 리사이즈됩니다.

유튜브 퍼가기 코드에서 제목/관련 동영상이 나오지 않게 하려면?

관련 동영상 차단은 ?rel=0 파라미터를 붙이면 됩니다.

<iframe src="https://www.youtube.com/embed/동영상ID?rel=0" ...></iframe>

단, 현재는 같은 채널의 추천 영상은 보여질 수 있도록 유튜브 정책이 변경된 점 유의하세요.

동영상이 모바일에서 너무 작거나 잘리는 경우 해결 방법은?

고정 width와 height로 삽입된 경우, 모바일 화면에 맞지 않게 표시될 수 있습니다.

이럴 땐 100% width 기반의 반응형 iframe 구조로 바꾸거나, CSS 미디어쿼리를 적용해 조정해야 합니다.

웹사이트 외부 주소가 아닌 직접 올린 MP4 영상을 삽입하고 싶을 땐?

자체 서버에 업로드한 동영상은 <video> 태그를 사용합니다.

<video width="640" height="360" controls>
  <source src="영상주소.mp4" type="video/mp4">
  브라우저가 video 태그를 지원하지 않습니다.
</video>

단, MP4 파일은 용량이 크고 서버 부하가 크기 때문에 가능하면 외부 스트리밍 서비스를 사용하는 것이 좋습니다.

유튜브가 차단된 지역에서도 재생되게 하려면 어떻게 하나요?

유튜브 자체가 국가 또는 네트워크에서 차단된 경우에는 비메오나 자체 호스팅, 또는 CDN 기반 스트리밍 플랫폼(예: JWPlayer, Wistia) 등을 활용하는 것이