유틸&IT팁

[블로그팁] 블로그 유튜브 영상(음악) 넣기

BETAGO 2020. 4. 25. 08:53

 

안녕하세요! 

일상과 팁을 공유하는 BETAGO!입니다. 



이전에 구글 블로그 플랫폼인 블로거(블로그스팟)을 만들며,

경험한 여러 팁들과 알게된점들을 공유하려고 합니다!

 

 


 블로그 유튜브 영상 예시

 
 
블로그에 유튜브 영상을 통해 영상 그 자체나, 혹은 음악을 틀고 싶은 경우가 있으실 겁니다. 

구글 블로그는 유튜브 영상을 검색 & 바로 업로드하는 기능이 있지만,
다른 블로그들은 이런 기능이 없는경우가 있죠?

그래서 오늘 삽입 방법에 대해 같이 알아보도록 하죠! 

아래는 삽입된 유튜브 영상의 예시입니다.
(제가 좋아하는 로스트아크 OST입니다) 
 
 
 

 

 

 


 

1. 유튜브 영상을 검색 & 코드를 복사

 

 

먼저 원하시는 유튜브 영상을 검색해주세요!

그리고 아래 사진처럼, 공유버튼을 눌러 HTML 코드를 복사해주세요!  

 

 

공유버튼을 누르고 -> 퍼가기를 누르자



 

 

 

복사를 누르자 (영상 재생 시작시간도 변경가능하다)



 


2. 블로그 포스팅 HTML 편집

 

 
이제 블로그 포스팅에  HTML 편집 기능으로 들어가 해당 코드를 붙여 넣으면 됩니다.  
그러고 나서 다시 기본 편집 모드로 돌아오시면, 영상이 삽입되어 있는 것을 확인할 수 있어요!

아래 사진 예시는 지금 사용하는 다음 티스토리 블로그로 보여드리겠습니다.
(웬만한 블로그들은 HTML 편집이 가능하게끔 되어있습니다) 

예시 HTML 코드 
<iframe width="560" height="315" src="https://www.youtube.com/embed/vRc0U91xE9M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



 

HTML 편집으로 들어가자 (예시: 다음 티스토리 블로그)



 

 

원하는 곳에 ENTER를 눌러서 자리를 만들고, 해당 코드를 붙여넣자!

 

 

 


블로그에 삽입한 유튜브 사이즈 변경

 

 
Q: 삽입까지는 했는데, 유튜브 영상 사이즈 변경이 불가능한가요?  

물론 가능합니다!  
이미 아시는 분도 있으시겠지만, HTML 코드를 다시 보시죠. 

<예시 HTML 코드> 
"<iframe width="560" height="315" src="https://www.youtube.com/embed/vRc0U91xE9M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"

 

HTML 코드를 보시면, width 은 가로(폭) & height는 세로(높이)를 의미합니다.  

저의 블로그 같은 경우에는 최대 Width 가 800px 이고, 세로는 가로에 맞게 자동 조정되기 때문에,  

800px로 바꾸어보겠습니다. 

 

만약, 본인 블로그의 최대 사이즈를 모르시겠다면,

임의의 숫자를 넣어보면서 어떻게 바뀌시는지 보면 됩니다!

(금방금방 확인 하실 수 있을 거예요!) 

 

 

 

 

width 를 580 -> 800으로 변경해보겠습니다

 

 

<width를 800으로 조정하여 삽입한 유튜브 동영상 예시>

 

 

 

와우! 제 블로그에 꽉차는 영상이 들어갔네요! 

정말 만족스럽습니다 ㅋㅋ 

 

 

 

 


 마치며

 

오늘은 유튜브 URL을 활용한 동영상 & 이미지 삽입방법을 알아보았는데요!
조금 번거롭고 귀찮아도, 그리 어렵진 않죠?

이렇게 사람을 번거롭고 귀찮게 하지만,
또 해낸다는 성취감을 주는게 블로그만의 묘미가 아닐까 생각됩니다 ㅋㅋ

다음에는 유튜브 말고, 다른 방법으로 음악을 삽입하는 방법도 알아보도록 하겠습니다.