티스토리 블로그 메인화면에 유튜브 영상 집어넣기

저의 티스토리 블로그 첫 화면(메인화면)을 보시면 아래와 같이 유튜브 영상이 배치돼있는 것을 보실 수 있습니다. "워런버핏이 된다는 것(Becoming Warren Buffett)" 라는 약 1시간 반짜리 유튜브 영상을 블로그 메인에 넣은 것입니다. 아주 감명깊게 본 영상으로 긴 긴 투자여행의 큰 이정표 같은 울림을 주는 영상이기에 대표 영상으로 넣었습니다.(유튜브 올려주신 분 감사합니다. 내리시지 않으셨으면 좋겠습니다^^)

 

이처럼 원하는 영상을 티스토리 블로그에 넣는 방법은 간단합니다. 코딩이라곤 HTML과 CSS를 여기저기 기웃거리며 짜집기로 아주 조금 배운 저도 몇 번 시도하다보니 성공했으니까요!

영상을 넣는 소스로는 다양한 소스가 있겠지만 저는 아래의 소스로 영상 배치에 성공했습니다. 위 소스를 Ctrl+C 로 복사한 후 영상을 넣고 싶은 위치에 Ctrl+V로 붙여넣기 하시면 됩니다.

<!--video 삽입 시작-->
	<div>
		<style type="text/css">
          .video-container { margin: 0;padding-bottom: 75%; max-width: 100%; height: 0; position: relative;overflow: hidden;} 
          .video-container iframe, 
          .video-container object, 
          .video-container embed { margin: 0;padding: 0; width: 100%; height: 95%;position: absolute; top: 0;left: 0; }
		</style>
		<div class="video-container">
			<object type="text/html" width="560" height="315" data="//www.youtube.com/embed/2JY50ocMxYA" allowFullScreen></object>
		</div>
	</div>
<!--video 삽입 종료-->	

 

'영상을 넣고 싶은 위치'를 찾는 방법은 크롬브라우저의 '개발자모드'의 도움을 받아야 합니다. '개발자모드'라는 단어가 나오니 머리가 띵 하실 수도 있지만, 개발자모드는 F12만 누르면 나오는 화면입니다^^

 

티스토리의 스킨편집 화면에 들어가셔서, 키보드의 F12버튼을 누르면 아래와 같은 화면이 나타납니다. 이제 HTML 편집화면에서 영상을 삽입할 위치를 찾아야 합니다. 아래 그림에서 개발자모드에서 파란색 네모로 표시한 화살표를 클릭하시고, 마우스를 아래 삼등분의 화면 중 첫번째에 가져다 놓으면 각종 영역들이 색깔별로 구분되면서 나타나는 것을 확인할 수 있습니다.

저같은 경우 '세 개의 연금계좌 굴리기'라고 쓰여진 곳 정도에 마우스를 놓고 클릭하니, 개발자도구를 보면 클릭한 부분에 해당하는 코드가 표시되는 것을 볼 수 있었습니다. 그 코드를 살펴보면 "div class=클래스명" 이라고 씌여있는 부분을 볼 수 있는데, 이 class 뒤에 있는 '클래스명'을 복사해서 스킨편집 화면의 HTML편집창에서 검색해서 찾습니다. 그 위치에 영상 삽입 소스를 넣으신 후 적용을 누르고 새로고침을 해보면 영상이 삽입된 것을 볼 수 있습니다. 참고로 class대신 id로 표시돼있을 수도 있습니다.

 

만약 의도했던 곳이 아닌데에 삽입됐다면 HTML편집기에서 조금씩 위치를 바꿔가면서 붙여넣기 후 적용, 새로고침을 하는 방식으로 몇 번 시도를 해보시면 원하는 위치에 배치할 수 있을 것입니다.

 

유튜브에서 원하시는 영상의 주소를 복사하여 위 영상 삽입 소스의 'data' 부분의 주소에 붙여넣기 하시면 해당 영상이 삽입된 것을 확인하실 수 있을 것입니다.

 

혹시 저처럼 블로그를 꾸미시려는 분은 이 포스팅을 보시고 성공하셨으면 좋겠습니다!!