Obsidian - 링크로 영상 삽입

이미지는 ![]() 애서 소괄호 안에 링크를 넣으면 자동으로 이미지를 표시해줬다.

하지만 영상의 경우엔 적용 방법이 다르다.

이번글에서는 html문법인 iframe을 사용해서 영상을 링크를 사용해 삽입하는 방법에 대해 알아보겠다.

 

 

 

빠른 사용법을 알고 싶은 사람을 위한 코드 블록 (width와 height)는 굳이 설정하지 않아도 됨.

<iframe src="HTML 링크" width=700, height=500> </iframe>

---

영상 링크 복사

나무위키에서 영상의 주소 복사

먼저, 사용하고 싶은 영상의 링크를 복사한다.

이번에 사용하는 영상의 링크는 아래와 같다.

https://i.namu.wiki/i/Hrys2sxpyIo0E5pEJutRTCHGv8bN569OrYXtIE8JQ3myRkiTLwrz-hw-M_xQ5iN15FMtoE4ygFsCRxfv_XTfJw.mp4

 

링크를 보면 뒤에 .mp4로 끝나는 것을 볼 수 있고, 이 링크는 영상 링크임을 알 수 있다.

---

적용

먼저 ![]()를 통해 이미지를 삽입하는 것처럼 넣어보면 정상적으로 삽입이 안되는 것을 알 수 있다.

영상이 표시 안됨

img 태그를 넣어도 안됨

video태그도 사용해볼 수 있지만, 일단 필자가 시도해본 결과로는 비디오의 한 프레임만 로딩되고 변화가 존재하지 않았다.

한 프레임만 로딩되고 변화 없음

---

여기서 사용해야하는 것이 바로 iframe이다.

 

iframe 태그에 대해 간단하게 설명하자면 외부의 웹 페이지 html 파일을 불러와서 삽입할 수 있는 기능을 말한다.

 

<iframe>태그 안에 src, width, height 등을 기입하여 영상을 로드할 수 있다.

굳이 높이나 넓이 설정하지 않아도 괜찮다면 src만 넣어도 불러와지기 때문에 일단 src만 채우고 결과물을 보고 width와 height를 넣는 것을 고려해봐도 좋다.

<iframe src="https://i.namu.wiki/i/Hrys2sxpyIo0E5pEJutRTCHGv8bN569OrYXtIE8JQ3myRkiTLwrz-hw-M_xQ5iN15FMtoE4ygFsCRxfv_XTfJw.mp4" width=700, height=500> </iframe>