Skip to main content
Crowdfunding
Python + AI for Geeks
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.