[팁] 반응형 블로그에 유튜브 동영상 넣기

유튜브 자체의 소스코드를 이용해서 유튜브 동영상을 삽입하는 경우 지정된 넓이와 높이가 모바일에서 볼때도 여전히 적용되어서 화면이 짤려서 보이는 문제가 발생한다.

이같은 문제를 말끔히 해결해주는 방법이 있어서 소개드립니다.

우선 유튜브에서 블로그에 삽입하고 싶은 동영상을 골라 소스코드를 복사한다

소스코드를 복사했으면 아래 빨간색 부분에다 붙여 넣는다.

<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 width="853" height="480" src="https://www.youtube.com/embed/x815A21RIto?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>

이 때 width와 height 값은 지워 버린다

<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 width="853" height="480" src="https://www.youtube.com/embed/x815A21RIto?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>

<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/x815A21RIto?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>

그리고 나서 윗 HTML코드를 글의 원하는 위치에 갖다 붙이면 끝. 아래 동영상이 이런식으로 삽입한 유뷰트 동영상이다. 가로 크기가 줄면 자동적으로 동영상 크기가 자동으로 조절되는 것을 알 수 있다.