Skip to main content
Practice

Embedding a YouTube Video in a Gallery

Let's replace the 4th item in the grid container with the "gallery" class to a YouTube video.

Changing the src of the 4th grid item
<div class="gallery">
  <img
    src="https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg"
    width="100%"
    height="100%"
    alt="Item1"
  />

  <img
    src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg"
    width="100%"
    height="100%"
    alt="Item2"
  />

  <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
  >
    Item3
  </video>

  <!-- Change the 4th video to an iframe -->
  <iframe
    width="100%"
    height="100%"
    src="https://www.youtube.com/embed/W0DCi5kwURM"
    title="iframe example"
    allow="fullscreen;"
  ></iframe>
</div>

By changing the 4th video tag to an iframe as shown above, you will see that the 4th grid item is filled with a YouTube video.

Feel free to change the src of the YouTube video to a video you like and create your own personalized gallery.

Next time, we will create a pop-up window (modal) that displays the image or video when clicked in the gallery.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.