채택완료

mp4 파일 첨부시 본문에서 재생되게 하려고 설정은 했는데 문의 드립니다.

안녕하세요.
게시판에 mp4 파일 첨부시 본문에서 재생되게 하려고 
view.skin.php에 아래와 같이 설정을 했습니다.

 

Copy
<?php
        // 파일 출력, 비디오 파일
        $video_count = count($view['file']);
        if($video_count) {
            echo "<div>\n";
            for ($i=0; $i<=count($view['file']); $i++) {
                if ($view['file'][$i]['file'] && @preg_match("/.mp4/i", $view['file'][$i]['file'])) {
                    echo '<video width="100%" height="100%" controls>';
                    echo '<source src="'.G5_URL."/data/file/".$bo_table."/".$view['file'][$i]['file'].'" type="video/mp4">';
                    echo '</video>';
                }
            }
            echo "</div>\n";
        }
        ?>

 

작동은 잘됩니다.

 

<video width="100%" height="100%" controls>
이렇게 설정하면 동영상 화면이 무조건 게시판 폭에 100%로 나오게 되고,

 

<video controls>
이렇게 설정하면 동영상이 원본 크기로 나오지만 게시판 폭보다 동영상이 크면 화면이 잘려버립니다.

 

지금 제 홈페이지가 반응형인데...
mp4 파일이 게시판 폭보다 작으면 원본 크기로 나오고,

mp4 파일이 게시판 폭보다 넓으면 게시판 폭에 맞춰 100%로 나오게 하고 싶은데,

 

혹시 방법이 있을까요?

 

echo "<div>\n"; 부분에 class로 width 100%를 줘보면 될까 했는데,

안되더라고요.

|

답변 2개 / 댓글 3개

채택된 답변
+20 포인트

예를 들어 다음과 같은 미디어 쿼리를 사용하면 가능하지 않을까요?

@media screen and (max-width: 769px) {

    video { width:100%; }

}

답변에 대한 댓글 1개

친절하신 답변 감사합니다.
덕분에 해결하였습니다.

Copy
#bo_v_img video{

    max-width:100%;height:auto

}

video[poster]{

    object-fit:fill

}

/* #bo_gall .gall_img {border-bottom:1px solid #eee;text-align:center;height:200px;max-height:200px;overflow:hidden} */

#bo_gall .gall_img {border-bottom:1px solid #eee;text-align:center;max-width:100%;height:auto;overflow:hidden}

#bo_gall .gall_img video {border-bottom:1px solid #eee;text-align:center;max-width:100%;height:auto;overflow:hidden}

video[poster]{object-fit:fill}

 

이렇게 잡아줬습니다.

 

기본 gallery 게시판 기준입니다.

답변에 대한 댓글 2개

친절하신 답변 감사합니다.
우성짱님께서 알려주신 방법도 테스트해보겠습니다.

일단 평정심님께서 남겨주신 댓글을 아래처럼 약간 수정하니 원하는대로 적용되네요.
@media (max-width:1100px) {
video {max-width:100%;}
}
넵 자신에게 맞는 방식으로 적용하면 됩니다.

답변을 작성하려면 로그인이 필요합니다.