본문으로 건너뛰기
실습하기

갤러리에 유튜브 영상 넣기

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!