동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

첨부파일

2014.05.09_02.PNG (181.7K) 27회 다운로드 2014-05-09 13:01:31
2014.05.09_03.PNG (199.6K) 28회 다운로드 2014-05-09 13:01:31

본문



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




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


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

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%;
}


게시판에서 동영상을 올릴 때,
아래 예시와 같이 동영상 소스를 감싸는 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판에서 동영상이 너무 크게 보여서 부담스럽더군요.
추천
3

댓글 12개

PC판에 사용하기 위해서 YouTube에서 width="640" 소스를 복사하면...  height는 자동으로 "480"이 됩니다만
보기에 조금 부담스럽습니다.
height="400" 으로 수정하는 편이 적당하더군요.
'동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 2'를 말씀하시는 것인가요?
그 부분은... 단지 div class의 자동 입력을 위해서 필요할 뿐입니다.
적용하지 않아도 됩니다.
두번째로 또 속았네요. 폰한테.
한참 후에 다시 보니까 폰에서도 잘 되고 있어요. 감사합니다. 삭제하려고 왔더니 댓글 달아주셔서.
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT