video 태그의 너비와 높이 설정하기

img 태그와 마찬가지로, video 태그도 너비(width)와 높이(height)를 지정할 수 있습니다.

복사
<video
  src="http://media.w3.org/2010/05/sintel/trailer.mp4"
  controls
  width="320"
  height="180"
>
  테스트 영상
</video>

위와 같은 HTML은 동일한 동영상의 너비를 320px, 높이를 180px로 만들어 표시합니다.

지금까지 웹페이지에 동영상을 넣는 떄 사용하는 <video> 태그에 대해 배웠습니다.

지금까지 배운 "video" 태그를 활용해, 갤러리에 비디오를 넣어볼까요?

gallery 그리드 내 3번째와 4번째 이미지 파일을 <video>로 바꾸어 보세요.

왼쪽 "업로드" 메뉴에 동영상을 업로드하면 해당 동영상의 URL을 확인할 수 있습니다.

이 URL을 src 속성에 넣거나, 직접 인터넷에서 동영상 URL을 찾아 src에 넣어보세요.

복사
<div class="gallery">
  <img
    src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg"
    width="100%"
    height="100%"
    alt="아이템1"
  />

  <img
    src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg"
    width="100%"
    height="100%"
    alt="아이템2"
  />

  <!-- 3번째 이미지를 영상으로 변경 -->
  <video
    src="https://joy1.videvo.net/videvo_files/video/free/video0461/large_watermarked/_import_60e0167b4c3a96.14254367_preview.mp4"
    class="gallery-video"
    width="100%"
    height="100%"
    controls
  >
    아이템3
  </video>

  <!-- 4번째 이미지를 영상으로 변경 -->
  <video
    src="https://joy1.videvo.net/videvo_files/video/free/video0454/large_watermarked/_import_60648ebe8b20a7.07188709_preview.mp4"
    class="gallery-video"
    width="100%"
    height="100%"
    controls
  >
    아이템4
  </video>
</div>

이제 3번째, 4번째 그리드 아이템은 이미지가 아닌 비디오를 표시하게 됩니다.

"video" 태그를 활용하면 동영상을 추가해 보다 더 생생한 웹페이지를 구성할 수 있지만, src 속성에는 반드시 영상 파일에 대한 URL이 들어가야 합니다.

그렇다면 Youtube 동영상 링크와 같이, 영상 파일 없이도 웹페이지에 영상을 표시하려면 어떻게 해야할까요?