유튜브(YouTube) 동영상을 꽉찬화면으로 넣어보자/ 반응형으로 꽉찬화면

안녕하세요 낭만고양이 입니다. 오늘은 유튜브(YouTube) 동영상을 꽉찬화면으로 넣는 방법에 대해 알아보도록하겠습니다. html 에 대해 조금만 아신다면 쉽게 적용할수가 있습니다.

 

우선 유튜브 동영상을 공유할려면 고유 주소를 아셔야 합니다. 고유주소란 유튜브 동영상 아래에 보면 공유 버튼을 누르면 아래와 같이 나옵니다. 빨간색 네모박스 부분이 고유주소입니다.

또는 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>

저는 위 와같이 소스를 만들어서 적용하니 아래와 같이 동영상이 나옵니다.

 

저는 이렇게 만든 소스를 서식에 등록해놓고 필요할때 마다 쉽게 불러와서 사용하고 있습니다. 여러분들도 서식에 등록해놓고 사용해보세요 엄청 편리합니다. 이상으로 유튜브 동영상 꽉찬화면으로 나오게하는 꿀팁이였습니다. 즐거운 하루 되세요~~^^

[블로그  추천글]

→ 한국 TV 드라마 실시간 다시보기 방법 
→ 스마트폰 토렌트 어플 /검색기능탑재
→ 토렌트 사이트 추천 TOP3 엄선