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>
이제 3번째, 4번째 그리드 아이템은 이미지가 아닌 비디오를 표시하게 되요.
"video" 태그를 활용하면 동영상을 추가해 보다 더 생생한 웹페이지를 구성할 수 있지만, src 속성에는 반드시 영상 파일에 대한 URL이 들어가야 해요.
그렇다면 Youtube 동영상 링크와 같이, 영상 파일 없이도 웹페이지에 영상을 표시하려면 어떻게 해야할까요?
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!