[Web 팁] 웹사이트에서 유투브 동영상 화면을 모바일에 최적화되어 보이게 하기

웹사이트(일반, 워드프레스, 기타 블로그 등)에 유투브 재생화면을 삽입 시

보통 데스크탑 사이즈에서는 잘 보이는데 모바일에서 보았을때 화면이 아예 늘어나버려서 다른 내용과 영역이 틀어져보일때

아래와 같은 코드를 삽입하여 모바일화면에서도 최적화되어 보이게 처리한다.

<div class="video-container">
         <iframe src="유투브동영상주소" frameborder="0" width="560" height="315"></iframe>
</div>

의 형식으로 HTML편집기에 삽입


CSS는 아래와 같이 지정한다.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.9QwuEd44.dpuf


이렇게 하면 화면사이즈에 따라 재생플레이어가 유동적으로 변화한다.

여기서 굵은 표시가 된 iframe태그는 유투브 플레이 화면에서 하단에 있는
공유 > 소스코드로 이동하여 보이는 코드를 복사후 교체하면 된다.


예시 페이지 : http://bigture.co.kr/?p=4348



* 참고 사이트 : http://avexdesigns.com/responsive-youtube-embed/