본문으로 건너뛰기

갤러리에 유튜브 영상 넣기

갤러리에 유튜브 영상 넣기

이제 "gallery" 클래스로 만든 그리드 컨테이너의 4번째 아이템을 유튜브 영상으로 바꾸어 볼게요.

4번째 그리드 아이템의 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"
/>

<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번째 영상을 iframe으로 변경 -->
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/W0DCi5kwURM"
title="iframe example"
allow="fullscreen;"
></iframe>
</div>

위와 같이 4번째 video 태그를 iframe으로 바꾸면



4번째 그리드 아이템으로 유튜브 영상이 채워진 것을 확인하실 수 있어요!

유튜브 영상의 src를 여러분이 좋아하는 영상으로 바꾸고, 나만의 갤러리를 꾸며보세요.

다음 시간에는 갤러리의 이미지와 영상을 클릭하면, 해당 이미지와 영상을 보여주는 팝업창(모달)을 만들어 볼게요!