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.
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help