[CSS] 유투브를 해당 코드상에서 꽉찬화면으로 보여주기 (반응형)

유투브 화면 영상을 해당 코드에 맞게 width,height 각각 100%으로 꽉찬 화면으로 보여주기 코드를 만들어보자.

특히나 반응형 코드 상에서 참으로 유용하다.

웹브라우저 크기를 변형해 가면서 확인해 보자.

 

 

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

 

 

참고 : https://disital.tistory.com/447