동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1

{이미지:0}

수정전입니다.
오른쪽 영상이 잘려서 보여지는데... 재생단추를 누르려면 약간 불편합니다.


{이미지:1}

수정후입니다.
깔끔하게 보입니다.


아래 소스를 'mobile/skin/board/basic' 경로의 'style.css' 파일의 적당한 곳에 삽입해 줍니다.

[code]img,
video {
display: inline-block;
width: auto\9 !important; /* ie8 */
width: auto !important;
max-width: 100%;
height: auto !important;
}
.video-container {
position: relative;
height: 0;
padding-top: 30px;
padding-bottom: 56.25%;
overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}[/code]

게시판에서 동영상을 올릴 때,
아래 예시와 같이 동영상 소스를 감싸는 div에 'video-container'란 클래스 속성을 입력해줘야 합니다.
좀 번거롭기는 합니다.

<div class="video-container" style="text-align:center">
<iframe width="640" height="480" src="//www.youtube.com/embed/hDkVQvhZx04?rel=0" frameborder="0" allowfullscreen></iframe>
</div>


출처 : http://demun.tistory.com/2246

원글 작성자에게서 공유 허락을 받았습니다.



위와 같은 과정 없이... 동영상 소스에 width="100%"로 해줘도 됩니다만...
PC판에서 동영상이 너무 크게 보여서 부담스럽더군요.