본문 바로가기


IT 나라

유튜브(YouTube) 동영상을 항상 꽉찬화면으로 공유하는 방법 꿀팁!!

by 낭만ii고양이 2019. 1. 23.


안녕하세요~오늘은 유튜브(YouTube) 동영상을 항상 꽉찬화면으로 넣는 방법에 대해 알아보도록하겠습니다.유튜브에서 기본적으로 제공하는 공유 소스는 꽉찬화면이 아닙니다.넓이 560에 높이 315로 고정되어 나오죠~ 하지만 제가 알려드리는 방법은 항상 넓이가 꽉찬화면으로 나오기에 보시기가 편하실겁니다. 모바일로 접속할때나 태블릿으로 접속할때 큰 모니터에서 접속할때 해상도가 높은 pc 에서 접속할때 등 어떤 환경에서 접속하더라도 항상 꽉찬화면으로 나옵니다  지금부터 저를 따라 천천히 오세요~

 



우선 유튜브 동영상을 웹상이나 블로그에 공유할려면 고유 주소를 아셔야 합니다.유튜브의 고유주소란 무엇일까요?  유튜브에 접속하셔서 원하는 유튜브 동영상을 누르신후  동영상 아래에 공유 버튼을 누르면 아래와 같이 나옵니다. 빨간색 네모박스 부분이 고유주소입니다.고유주소를 알수있는 가장 편한 방법입니다.







<




또는 유튜브 동영상을 클릭하면 익스플로러 상단에 url 표시되는 부분을 보시면 아래와 같이 나오는데 빨간색 네모박스 부분이 고유주소입니다.










이제 고유주소가 무엇인지 아셨지요? 고유주소를 알았으니 본격적으로 적용하는 방법에 대해 알아보도록 하겠습니다. 원하는 유튜브 동영상의 고유주소를 복사해놓으세요. 그런다음 아래 소스에서 고유주소 라는 부분 대신 아까복사한 코드를 붙여넣으세요




<style>
.embed-container {
 position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/고유주소' frameborder='0' allowfullscreen>
</iframe></div>





고유주소를 바꿔치기 했다면 이제 위  소스를  드래그 하셔서 복사하세요.

이제 블로그 포스팅을 하실때 html 코드에 체크한후 붙여넣으시면 유튜브 동영상이 꽉찬화면으로 나올것입니다.



<style>
.embed-container {
 position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; }
</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/_qmcg4vqmVg' frameborder='0' allowfullscreen>
</iframe></div>






저는 위와 같이 소스를 만들어서 적용하니 아래와 같이 동영상이 나옵니다. 꽉찬화면으로 잘나오는것을 확인할수가 있습니다. 유튜브에거 기본으로 제공하는 소스는 이렇게 꽉찬화면으로 안나올겁니다.






 

저는 이렇게 만든 소스를 티스토리 서식에 등록해놓고 필요할때 마다 쉽게 불러와서 사용하고 있습니다. 서식 불러오기 한후 고유주소만 바꿔주시면 됩니다. 여러분들도 서식에 등록해놓고 사용해보세요 엄청 편리합니다. 지금까지 유튜브 동영상 꽉찬화면으로 나오게하는 꿀팁이였습니다. 다음에는 더욱 알찬 정보를 가지고 오겠습니다~~행복한 하루 되세요~~










댓글