Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Embedding a YouTube Video in the Gallery

Let's replace the fourth item in our grid container that has the class "gallery" with a YouTube video.

Change 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 fourth video tag to an iframe as shown above, you will see that the fourth grid item is now filled with a YouTube video.

Feel free to change the src of the YouTube video to one of your favorite videos and personalize your gallery.

Next time, we will create a popup (modal) that shows the image or video when you click on an item in the gallery.

Want to learn more?

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