유튜브 동영상 삽입 너비 100% : 반응형 iframe 사용

유튜브 동영상 삽입 너비 100% : 반응형 iframe 사용

유튜브 동영상을 넣었을때 반응형 형태로 너비 100% 조정이 되는 경우에

고정 사이즈 문제가 있어서 검색해보니 방법이 있어서 올려봅니다.

 

iframe 부분에 링크만 변경해서 사용하시면 됩니다.

적용 예) 지급 보이는 창을 줄여서 확인해보세요.

사용 style 태그)

<style>

.youtube_container {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 56.25%;

}

.video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

</style>

<div class="youtube_container">

<iframe src="//www.youtube.com/embed/FKxZRuswPk4" 

frameborder="0" allowfullscreen class="video"></iframe>

</div>

참고: http://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed