동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 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의 자동 입력을 위해서 필요할 뿐입니다.
적용하지 않아도 됩니다.
                
                    두번째로 또 속았네요. 폰한테. 
한참 후에 다시 보니까 폰에서도 잘 되고 있어요. 감사합니다. 삭제하려고 왔더니 댓글 달아주셔서.
                    한참 후에 다시 보니까 폰에서도 잘 되고 있어요. 감사합니다. 삭제하려고 왔더니 댓글 달아주셔서.
                
                    감사합니다^^                
                
                
            
                    
                
                    좋은 정보 감사합니다.
덕분에 모바일에서의 유튜브 영상 보기 문제가 해결되었습니다.
                    덕분에 모바일에서의 유튜브 영상 보기 문제가 해결되었습니다.
                
                    전왠지모르게 안되네요 ㅠ                
                
                
            
                    
                
                    몇시간 째 고민하고 있었는데 ㅋ ㅠㅠ 감사합니다.                
                
                
            
                    
                
                    너무 감사합니다^^                
                
                
            
                    
                
                    감사합니다.                
                
                
            
                    
                
                    좋은 내용 감사합니다.                
                
                
            
                    