mp4 파일 첨부시 본문에서 재생되게 하려고 설정은 했는데 문의 드립니다.
본문
안녕하세요.
게시판에 mp4 파일 첨부시 본문에서 재생되게 하려고
view.skin.php에 아래와 같이 설정을 했습니다.
<?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
예를 들어 다음과 같은 미디어 쿼리를 사용하면 가능하지 않을까요?
@media screen and (max-width: 769px) {
video { width:100%; }
}
친절하신 답변 감사합니다.
덕분에 해결하였습니다.
#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 게시판 기준입니다.
친절하신 답변 감사합니다.
우성짱님께서 알려주신 방법도 테스트해보겠습니다.
일단 평정심님께서 남겨주신 댓글을 아래처럼 약간 수정하니 원하는대로 적용되네요.
@media (max-width:1100px) {
video {max-width:100%;}
}
넵 자신에게 맞는 방식으로 적용하면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
