갤러리에 유튜브 영상 넣기

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

복사
<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를 여러분이 좋아하는 영상으로 바꾸고, 나만의 갤러리를 꾸며보세요.

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