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

웹사이트 동영상 링크 삽입 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 사용해 추가하거나 크기를 조절할 수 있습니다.

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