video 태그의 너비와 높이 설정하기
img 태그와 마찬가지로, video 태그도 너비(width)와 높이(height)를 지정할 수 있습니다.
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에 넣어보세요.
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>