W67.kr

XE3  구조는 아무 곳이나 폴더를 만들면, 보안때문에 XE3 에서 인식을 하지 않습니다.

사용자에게 보안이 열려있는 폴더의 위치는 아래와 같습니다.

설치 폴더/ storage/ app/ public/ user

user 폴더 내에 원하는 폴더를 만들고, 자료를 넣어야만 게시판에서 불러올수 있습니다.

가로 세로 고정 비율을 가진 영상 코드

기본 영상 크기를 설정하고, 화면 크기에 따라 비율을 유지하는 코드 입니다.

<style type="text/css">/* 동영상을 감싸는 박스 설정 (크기 완전 고정) */
  .video-container {
    /* ???? 가로·세로를 4:3 비율의 고정 픽셀(px)로 지정합니다 */
    width: 640px !important;    /* 가로 크기 고정 */
    height: 480px !important;   /* 세로 크기 고정 (640의 4:3 비율인 480px) */
    
    margin: 0 auto;             /* 화면 중앙 정렬 */
    overflow: hidden;
    background: #000;           /* 배경색 검은색 */
    position: relative;
  }

  /* 내부 영상이 고정된 박스에 무조건 꽉 차도록 설정 */
  .video-container video,
  .video-container iframe,
  .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill;           /* ???? 영상 소스가 어떤 비율이든 640x480 박스에 강제로 늘려 맞춤 */
    border: 0;
  }

  /* 모바일 화면 배려: 화면 폭이 640px보다 작아질 때만 예외적으로 반응형 처리 */
  @media screen and (max-width: 640px) {
    .video-container {
      width: 100% !important;   /* 모바일에서는 가로를 꽉 채우고 */
      height: auto !important;  /* 높이는 가로에 맞춰 자동 조절 */
      aspect-ratio: 4 / 3;      /* 모바일에서도 4:3 비율 강제 유지 */
    }
    .video-container video,
    .video-container iframe {
      object-fit: cover;        /* 모바일에서는 잘림 없이 여백 제거 */
    }
  }
</style>
<!-- 실제 게시물에 들어갈 HTML 구조 -->
<div class="video-container"><iframe src="https://URL/storage/app/public/user/mp4/파일명.mp4"></iframe></div>

자신의 환경에 맞게 수정해서 사용하세요.