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.