동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1 정보
동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1첨부파일
본문
수정전입니다.
오른쪽 영상이 잘려서 보여지는데... 재생단추를 누르려면 약간 불편합니다.
수정후입니다.
깔끔하게 보입니다.
아래 소스를 '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
3
댓글 12개
꼭 필요했었는데 정말 감사합니다. 잘 쓰겠습니다.
PC판에 사용하기 위해서 YouTube에서 width="640" 소스를 복사하면... height는 자동으로 "480"이 됩니다만
보기에 조금 부담스럽습니다.
height="400" 으로 수정하는 편이 적당하더군요.
보기에 조금 부담스럽습니다.
height="400" 으로 수정하는 편이 적당하더군요.
pc 모바일에서는 되는데,
모바일에서는 안되는 이유가?
그런데, 게시글1과 2 동시에 해야죠?
모바일에서는 안되는 이유가?
그런데, 게시글1과 2 동시에 해야죠?
'동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 2'를 말씀하시는 것인가요?
그 부분은... 단지 div class의 자동 입력을 위해서 필요할 뿐입니다.
적용하지 않아도 됩니다.
그 부분은... 단지 div class의 자동 입력을 위해서 필요할 뿐입니다.
적용하지 않아도 됩니다.
두번째로 또 속았네요. 폰한테.
한참 후에 다시 보니까 폰에서도 잘 되고 있어요. 감사합니다. 삭제하려고 왔더니 댓글 달아주셔서.
한참 후에 다시 보니까 폰에서도 잘 되고 있어요. 감사합니다. 삭제하려고 왔더니 댓글 달아주셔서.
감사합니다^^
좋은 정보 감사합니다.
덕분에 모바일에서의 유튜브 영상 보기 문제가 해결되었습니다.
덕분에 모바일에서의 유튜브 영상 보기 문제가 해결되었습니다.
전왠지모르게 안되네요 ㅠ
몇시간 째 고민하고 있었는데 ㅋ ㅠㅠ 감사합니다.
너무 감사합니다^^
감사합니다.
좋은 내용 감사합니다.